Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to use focus selector in css", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use focus selector in css" this article.

A brief introduction to css:focus selector

Focus is a pseudo-class selector for css that can be used to select elements that gain focus, and then style those elements that gain focus

Any element that can receive keyboard events or other user input is fine: focus selectors, in most cases: focus selectors are used on links and form elements.

For example, the user clicks an input input box to get the focus, and then the border style of the input input box changes, which is different from the other input boxes, indicating that it has been selected.

In general, browsers automatically add outlines around form elements when they gain focus, the style added by the browser is the default style for each browser, and usually, the default style between each browser looks different. However, for the sake of the overall beauty of the page and the style compatibility of the browser, we often need to modify the element style when we gain focus and replace the default style with our own style.

At this point, we can use the css:focus selector to set the default style of the element when the browser gets focus. Example:

Input:focus {

Outline:0;/* removes the browser default style * /

Border:2pxsolidpink

}

Description: the outline is similar to the border, but they are not exactly the same, we need to set its style through the outline property. For example: set outline:0; to remove the outline.

We can also use the css:focus selector on links, for example:

A:focus {

Outline:0

Color:red

}

Note:

When we use the css:focus selector to link styles, it is recommended to set: focus style after the style set by: link and: visited selector, otherwise the style provided by: focus selector will be overridden by the style provided by: link and: visited selector.

In addition to these three pseudo-classes,: hover and: active pseudo-classes can also be used to set link styles, which appear after the style of: focus.

The order mentioned above, that is, the order of link,visited,focus,hover,active, is preferred, which ensures that the style of each pseudo class is applied if necessary and is not overridden by the style of another pseudo class. Example:

A:link {

Color:#0099cc

}

A:visited {

Color:grey

}

A:focus {

Background-color:black

Color:white

}

A:hover {

Border-bottom:1pxsolid#0099cc

}

A:active {

Background-color:#0099cc

Color:white

}

An example of a css:focus selector:

The background color of the focus input and text area fields is converted to a light yellow highlight with a light red border.

Html Code:

Focus here, textarea text box

Button

Css code

.container {

Margin:40pxauto

Max-width:400px

}

Input

Textarea

Button {

Padding:.5em

Display:block

Width:100%

Margin-bottom:.5em

}

A:link {

Color:deepPink

}

/ *: focusstyles*/

A:focus

Input:focus

Textarea:focus

Button:focus {

/ * overridedefaultbrowseroutline*/

Outline:0

/ * applyotherstyles*/

Outline:2pxsolid#F47E58

Border-radius:5px

}

Input:focus

Textarea:focus {

Background-color:#FFFF66

}

The above is all the contents of the article "how to use focus selectors in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.