Use CSS to remove the oversized rounded corners of buttons on iPhone web pages and the default style of text box rounded corners_html/css_WEB-ITnose

When using the browser on the iPhone to browse the web, the buttons always display super large rounded corners and a gradient color from top to bottom, which looks super disgusting, and the text box will also have a certain Rounded corners, but our own definition of border-radius has no effect. After searching, we found that this is the default style set by the webikt kernel browser for the control through the private property -webkit-appearance. The solution at this time is:

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

Among them, -webkit-appearance:none removes the default input style.

At this time, although the disgusting style of the button displaying super rounded corners and the color gradient from top to bottom has been removed, the rounded corners of the button still exist, so you still need to add: border-radius:0 to the style. . Note that it can only be border-radius:0; and border-radius:none cannot be used. Because border-radius:none is used, the iPhone browser does not seem to recognize it and will still give the input a rounded corner of about 5 pixels. If you need to set rounded corners for the form, such as 5px, then set border-radius:5px yourself.

When we write a form, we will find that some browsers assign default styles to the form. For example, under the Chrome browser, text boxes and drop-down selection boxes will have glowing borders when they load focus. And under Firefox and Google Chrome, the multi-line text area textarea can be freely dragged and enlarged. In addition, under IE10, when content is entered in the text box, a small cross will appear on the right side of the text box, etc. wait. There is no doubt that these effects have improved the user experience, but sometimes we don’t need these default styles, so what should we do? Let’s take a look at the solutions separately.

1. Remove the default glowing border of text boxes in Chrome and other browsers

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;
}

Of course, when the text box loads the focus, the borders of the text boxes under all browsers will not change in color or style, but we You can re-set it according to your own needs, such as:





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

In this case, when the text box loads the focus, the border color will change to orange, giving the user a feedback.

2. Remove the small cross behind the text box of IE10 browser

Just the following sentence is ok




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

3. Disable multi-line text box textarea dragging

In this way, add attributes below and the multi-line text box cannot be dragged Drag to zoom in and out:




textarea {
resize: none;
}

There is an attribute resize to mention here, this is CSS3 attribute, used for element scaling, it can take the following values:

none Default value

both allows horizontal and vertical scaling

horizontal only allows horizontal direction Scaling

vertical only allows scaling in the vertical direction

can be applied not only to textarea elements, but also to most elements, such as divs, etc. I will not list them all here, but unlike textarea, When using divs, you need to add overflow: auto;, which is how it works:

div {
resize: both;
overflow: auto;
}

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