UI element state pseudo-class selector

The so-called ui element status pseudo-class is a pseudo-class selector that mainly controls the style of different states of form elements.
Different states of form elements such as available and unavailable text boxes, selected and unselected check boxes and radio buttons, etc.

There are 11 UI pseudo-class selectors in CSS 3, which are:

E:hover;/*支持firefox、safari、Opera、ie8、chrome*/
E:active;/*支持firefox、safari、Opera、chrome   不支持ie8*/
E:focus; /*支持firefox、safari、Opera、ie8、chrome*/
E:enabled;/*支持firefox、safari、Opera、chrome   不支持ie8*/
E:disabled;/*支持firefox、safari、Opera、chrome   不支持ie8*/
E:read-only;/*支持firefox、Opera  不支持ie8、safari、chrome */
E:read-write/* 支持firefox、Opera  不支持ie8、safari、chrome*/ 
E:checked /*支持firefox、safari、Opera、chrome   不支持ie8*/
E::selection /* 支持firefox、safari、Opera、chrome   不支持ie8 */
E:default /*只支持firefox*/
E:indeterminate/*只支持Opera*/

Explain one by one:

1.E:hover selector is used to specify when the mouse pointer The style used by the element when moved over it.
2.E:active selector is used to specify the style used when the element is activated (when the mouse is pressed on the element but has not been released).
3.E:The focus selector is used to specify the style used when the element gains focus. It is mainly used when the text box control is focused and used for text input.
4:E:enabled selector is used to specify the style when the current element is in the available state
5:E:disabled selector is used to specify the style when the current element is in the unavailable state
6.E:read- The only selector is used to specify the style when the element is in a read-only state. Under ff, it needs to be written in the form of -moz-read-only
7.E: The read-write selector is used to specify when the element is in a non-read-only state. style. Under ff, it needs to be written in the form of -moz-read-write
8.E: The checked selector is used to specify the style when the radio button or checkbox in the form is in the selected state. Under ff, it needs to be written in the form of -moz-checked
9.E: The default selector is used to specify the style of the radio button or check box that is selected by default when the page is opened. It should be noted that even if the user changes the radio button or check box that is set to the selected state by default to a non-selected state, the style set using the E:default selector is still valid.
10.E: The indeterminate selector is used to specify the style of the entire group of radio buttons if any radio button in a group of radio buttons is not set to the selected state when the page is opened. If the user selects any radio button in this group, the style of the entire group of radio buttons is unstyled.
11.E::selection selector is used to specify the style when the element is selected. What needs to be noted here is: when used under ff, it needs to be written in the form of -moz-selection.

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style type="text/css">
ul li{
  list-style:none;
}
input[type='text']:disabled{
  color:green;
}
</style>
</head>
<body>
<ul>
  <li><input type="text" value="php中文网"/></li>
  <li><input type="text" disabled value="php中文网"/></li>
</ul>
</body>
</html>

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.php.cn/" /> <title>php中文网</title> <style type="text/css"> ul li{ list-style:none; } input[type='text']:disabled{ color:green; } </style> </head> <body> <ul> <li><input type="text" value="php中文网"/></li> <li><input type="text" disabled value="php中文网"/></li> </ul> </body> </html>

submit Reset Code

Automatic operation

UI element state pseudo-class selector

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]