Use CSS to get rid of the Super large corner of buttons on IPhone Web pages and the default style of text box fillet

Using the browser on the IPhone to browse the Web page, the button always shows the Super large corner and the color from the top and bottom of the gradient style, appear super disgusting, and the text box will have a certain fillet, but we have no effect on the definition of Border-radius, after the search found that this is Webikt The kernel browser sets the default style for the control through the private property-webkit-appearance. The solution at this point is:

input[type=submit input[type =reset], Input[type=button), input[type =text] {-webkit-appearance: none

webkit-:none is to remove the input default style.

< Span class= "PLN" >border-radius:none The iphone browser doesn't seem to recognize it and still gives input a rounded corner about 5 pixels. If you need to set the form fillet such as 5px, then you can set the border-radius:5px.

< Span class= "PLN" > We'll find some browsers that give the form a default style when we write the form. As in the Chorme browser, the 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, in addition to IE10, when the text box input content, 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.

< Span class= "PLN" > 1, remove chrome and other browser text boxes default Glow border
    
Input:focus, Textarea:focus {
    outline:none;
}

Remove Highlight style:

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

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

In this case, when the text box is loaded into focus, the border color turns orange, giving the user a feedback.

2, remove the small fork in the ie10+ browser text box

Just the following sentence is OK



    
Input::-ms-clear {
    Display:none;
}

3, Prohibit multiline text box textarea drag

So add properties by following the multiline text box cannot be dragged and zoomed out:



    
TextArea {
    resize:none;
}

Here to mention a property resize, which is the CSS3 property, for element scaling, which can take several values:

None Default

Both allow horizontal and vertical scaling

Horizontal Allow only horizontal scaling

Vertical only allow vertical scaling

can be applied not only for TEXTAREA elements, but for most elements, such as Div, not listed here, but unlike textarea, You need to add a overflow:auto to the Div, which is how it works:
    
Div {
    resize:both;
    Overflow:auto;
}

above is something about removing the default style of the form browser.

Use CSS to remove the super-large corners of buttons on IPhone pages and the default style of text box fillets