Change iOS input style

Original address

iOS under the input[type= ' Tel '],input[type= ' text '] input box, in the trigger, input will have a gray background color block, flash over, online search a lot of keywords, have nothing, and later with the development of iOS students chatted, He says iOS has a native highlight familiarity, that's all.

-webkit-tap-highlight-color

This attribute is only available for iOS (iphone and ipad). When you click on a link or a clickable element defined through JavaScript, it appears with a translucent gray background. To reset this performance, you can set the-webkit-tap-highlight-color to any color.

To disable this highlight, set the color's alpha value to 0.

-webkit-tap-highlight-color:transparent;

At this point, solve the problem, but ...

In this process, another CSS attribute is found, 

-webkit-appearance

-webkit-appearance is an irregular attribute (unsupported WebKit property) that does not appear in the draft CSS specification. -webkit-appearance are used to change the appearance of buttons and other controls so that they look similar to native controls.

About this attribute previously written to solve the problem of the inability to render the button under iOS, the problem arises because of the default button style in Safari under iOS: Input[type= "button"], input[type= "Submit", Input[type = "Reset"] {-webkit-appearance:push-button; white-space:pre;}

Where-webkit-appearance:push-button is the style of setting the button to the default native control in iOS.

Usually we can add-webkit-appearance:none to the corresponding elements;

To remove the native control style.

Some of the other more useful cases are when we want some elements to be set to the style of the native control of the system, such as the following Span tab set to the styles of various controls: button

This is similar to the input type = search, the right side will appear a small fork, it's amazing

Wait a minute