Change iOS input style

Source: Internet
Author: User

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.


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.


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

In this process, another CSS attribute is found, 


-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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.