How to use css to remove the default style assigned by the browser to a form

When we write a form, we will find that some browsers assign default styles to the form. For example, in the Chrome browser, the text box and drop-down selection box will have glowing borders when they load focus, and in Firefox and Google Chrome, the multiline text boxtextarea 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. Fork, 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 the text box in browsers such as Chrome

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 this is the case Since then, when the text box loads the focus, the border of the text box under all browsers will not change in color or style, but we can set it again according to our 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 in IE10+ browser

Just the following sentence is ok

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

3. Prohibit multiple lines Drag the text box textarea

In this way, click the following to addattributesThe multi-line text box cannot be dragged to zoom in or out:

textarea {
    resize: none;
}

Required here Mentioned an attribute resize, this is a 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 scaling

vertical only allows vertical scaling

It can be applied not only to textarea elements, but also to most elements, such as divs, etc., not here List them one by one, but unlike textarea, you need to add the sentence overflow: auto; when using div, that is, this will be effective:

div {
    resize: both;
    overflow: auto;
}

The above is the detailed content of How to use css to remove the default style assigned by the browser to a form. For more information, please follow other related articles on the PHP Chinese website!