CSS Modify IOS Default button style

Do not know everyone in the mobile page when the time has not encountered on the IOS some buttons display and Android's very different, this afternoon another guy in the group asked this question. I remember I met before, today to share with you how to use CSS to modify the default style of iOS.

650) this.width=650; "class=" AlignCenter size-full wp-image-980 "src=" http://www.aliyue.net/wp-content/uploads/2016 /05/aios.jpg "alt=" AIOs "width=" 487 "height=" 296 "style=" Height:auto;vertical-align:middle;border:0px;text-align: center;margin:0px auto; "/>

========================================================

Small month bo guest

Http://www.aliyue.net

W E B

========================================================

First: About buttons

First of all, this picture is not styled with CSS:

650) this.width=650; "class=" AlignCenter size-full wp-image-978 "src=" http://www.aliyue.net/wp-content/uploads/2016 /05/css_ios01.jpg "alt=" css_ios01 "width=" 183 "height=" 219 "style=" height:auto;vertical-align:middle;border:0px; text-align:center;margin:0px auto; "/>

What we want, however, is this:

650) this.width=650; "class=" AlignCenter size-full wp-image-979 "src=" http://www.aliyue.net/wp-content/uploads/2016 /05/css_ios02.jpg "alt=" CSS_IOS02 "width=" "height=" 247 "style=" height:auto;vertical-align:middle;border:0px; text-align:center;margin:0px auto; "/>

So we're going to decorate it with our CSS.

Just add a sentence in the style to remove the CSS from the iphone, ipad default button style is OK! ~

Input[type= "button"], input[type= "Submit"], input[type= "reset"] {-webkit-appearance:none;} textarea {-webkit-appearance:none;}

If there is a fillet problem,

. button{border-radius:0;}

Second: About the form

When we write the form, we will find that some browsers have given the form the default style, such as the Chorme Browser, text box and drop-down selection box when loading the focus, there will be a glowing border, and in Firefox and Google Browser, multi-line text box textarea can also be free to drag and pull large, Also under IE10, when the text box is entered, a small fork will appear on the right side of the text box, and so on. No doubt, these effects are improved in the user experience, but sometimes we don't need these default styles, what do we do? Let's take a look at the solution separately.

< 1 >, remove chrome and other browser text box default Glow border

Input:focus, Textarea:focus {outline:none;}

Remove the Highlight style:

input:focus{-webkit-tap-highlight-color:rgba (0,0,0,0); -webkit-user-modify:read-write-plaintext-only;}

Of course, when the text box is loaded into focus, the borders of the text boxes under all browsers will not change in color or style, but we can set them back to our own needs, such as:

input:focus,textarea:focus {outline:none; border:1px solid #f60;}

That way, when the text box is loaded into focus, the border color turns orange, giving the user a feedback.

< 1 > Remove the small fork behind the ie10+ browser text box

Just the following sentence is OK

input::-ms-clear {display:none;}

3, prohibit multi-line text box textarea drag

In this way, add properties to the multiline text box cannot be dragged and zoomed out:

textarea {Resize:none;}

Here to mention a property resize, this is the CSS3 property, for element scaling, it can take the following values:

• None Default Value

• Both allows horizontal and vertical scaling

• Horizontal only allows horizontal scaling

• Vertical only allows zooming in the vertical direction

Not only for TEXTAREA elements, for most of the elements are applicable, such as Div, and so on, not listed here, but unlike textarea, the use of the div need to add a sentence overflow:auto, that is, the effect:

div {resize:both; overflow:auto;}

Reprint please specify: Xiao Yue Blog CSS modified IOS default button style

This article is from the "Xiao Yue Blog" blog, please be sure to keep this source http://aliyue.blog.51cto.com/11564403/1784929

CSS Modify IOS Default button style