CSS Mask WebKit Browser input highlighting and textarea scaling

The Webkit Core browser includes Apple Safari and Google Chrome, Webkit Core has good performance and is very user-friendly in some details, page input box (input The focus highlighting and text box (TextArea tab) Scaling feature is one of two very user-friendly designs. However, these two designs will have an impact on the page design while being user-friendly.

CSS Mask Webkit Input Box highlight

Here is what happens when the input box in the Webkit browser gets the focus by default.

We can see that Webkit's highlighting of the input box has made the page appear different in style and design style. If your site already has a special style defined for the input box , you might as well block out the Webkit function. Add the following CSS to easily remove the highlights.

Input { Outline : None ; } / * Shield text Box Highlight/* TextArea { Outline : None ; }

CSS Mask Webkit text box scaling

Webkit text box scaling is designed to facilitate the user to make a large number of text input, but sometimes the scale of the fruit will result in the following diagram, disrupting the layout of the page. If your site has provided users with enough space for users to input, then you can block this feature, with CSS there are two ways.

CSS 2.1 Method:

Principle: Limit the maximum width and height of the text box to the size of the design.

TextArea { width : 400px ; Max-width : 400px ; Height : 400px ; Max-height : 400px ;

The CSS3 method:

It is recommended that you use the Resize property to prevent scaling of elements because Chrome is good for CSS3 support.

Texearea { Resize: none; }