Analysis on css3 UI element status pseudo-class selector
This article mainly introduces the UI element status pseudo-class selector of CSS3, including hover, active and focus, enabled, disabled read-only and read-write, etc. Friends who need it can refer to it
The so-called UI selector: The specified style only works when the element is in a certain state, and does not work in the default state!
Browser compatibility:
E:hover Supports firefox, safari, Opera, ie8, chrome ------------
E:active Supports firefox, safari, Opera, chrome Does not support ie8
E: focus 支持firefox、safari、Opera、ie8、chrome -------------
E:enabled 支持firefox、safari、Opera、chrome 不支持ie8
E:disabled 支持firefox、 safari, Opera, and chrome do not support ie8
E:read-only support firefox and Opera do not support ie8, safari, chrome
E:read-write support firefox and Opera Does not support ie8, safari, chrome
E :checked Supports firefox, safari, Opera, and chrome Does not support ie8
E::selection Supports firefox, safari, Opera, and chrome Does not support ie8
E:default Only supports firefox ---------- --
E:indeterminate Only supports chrome Does not support ie8
E:valid Supports firefox and safari , Opera, Chrome does not support IE8
E: Required to support Firefox, Safari, Opera, Chrome, do not support IE8
E: Optional to support Firefox, Safari, Opera, Chrome does not support IE8
E: In-Range support firefox, safari, Opera, chrome Does not support ie8
E:out-of-rang Supports firefox, safari, Opera, chrome Does not support ie8
The following is a detailed description of its use;
1. Selectors E:hover, E:active and E:focus
1). The E:hover selector is used to specify when the mouse pointer moves to The style used by the element when the element is on
Usage method:
CSS Style
}
We can use the "< element >" to add the type attribute of the element.
Example:
input[type="text"]:hover{
CSS style
}
2). The E:active selector is used to specify the style used when the element is activated.
3). The E:focus selector is used to specify the style used by the element to obtain the cursor focus. It is mainly used when the text box control obtains the focus and performs text input.
For example:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>选择器E:hover、E:active和E:focus</title>
<style>
input[type="text"]:hover{
background: green;
}
input[type="text"]:focus{
background: #ff6600;
color: #fff;
}
input[type="text"]:active{
background: blue;
}
input[type="password"]:hover{
background: red;
}
</style>
</head>
<body>
<h1>选择器E:hover、E:active和E:focus</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名">
<br/>
<br/>
密码：<input type="password" placeholder="请输入密码">
</form>
</body>
</html>2, E:enabled pseudo-class selector and E:disabled pseudo-class selector
1), The E:enabled selector is used to specify the style when the element is in an enabled state.
2). The E:disabled selector is used to specify the style when the element is in a disabled state.
For example:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>E:enabled伪类选择器与E:disabled伪类选择器</title>
<style>
input[type="text"]:enabled{
background: green;
color: #ffffff;
}
input[type="text"]:disabled{
background: #727272;
}
</style>
</head>
<body>
<h1>E:enabled伪类选择器与E:disabled伪类选择器</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名" disabled>
<br/>
<br/>
学校：<input type="text" placeholder="请输入学校">
</form>
</body>
</html>3. E:read-only pseudo-class selector and E:read-write pseudo-class selector
1). The E:read-only selector is used to specify the style when the element is in the read-only state.
2). The E:read-write selector is used to specify the style when the element is in a non-read-only state.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>read-only伪类选择器与E:read-write伪类选择器</title>
<style>
input[type="text"]:read-only{
background: #000;
color: green;
}
input[type="text"]:read-write{
color: #ff6600;
}
</style>
</head>
<body>
<h1>read-only伪类选择器与E:read-write伪类选择器</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名" value="winson" readonly>
<br/>
<br/>
学校：<input type="text" placeholder="请输入学校">
</form>
</body>
</html>4. Pseudo-class selectors E:checked, E:default and indeterminate
1). E:cehcked pseudo-class selector is used to specify the current The style of the radio radio button or checkbox in the form when it is selected.
2). The E:default selector is used to specify the style of the radio button or check box control that is in the selected state by default when the page is opened.
3). The E:indeterminate selector is used to specify the style of the entire group of radio button boxes when no single radio button box in a group of radio button boxes is set to the selected state when the page is opened.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>checked伪类选择器</title>
<style>
input[type="checkbox"]:checked{
outline: 2px solid green;
}
</style>
</head>
<body>
<h1>checked伪类选择器</h1>
<form>
房屋状态：
<input type="checkbox">水
<input type="checkbox">电
<input type="checkbox">天然气
<input type="checkbox">宽带
</form>
</body>
</html>Default selection items
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>default伪类选择器</title>
<style>
input[type="checkbox"]:default{
outline: 2px solid green;
}
</style>
</head>
<body>
<h1>default伪类选择器</h1>
<form>
房屋状态：
<input type="checkbox" checked>水
<input type="checkbox">电
<input type="checkbox">天然气
<input type="checkbox">宽带
</form>
</body>
</html><h1 style="color: rgb(0, 0, 0); font-family: Simsun; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">indeterminate伪类选择器</h1><!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>indeterminate伪类选择器</title>
<style>
input[type="radio"]:indeterminate{
outline: 2px solid green;
}
</style>
</head>
<body>
<h1>indeterminate伪类选择器</h1>
<form>
性别：
<input type="radio">男
<input type="radio">女
</form>
</body>
</html>5. Pseudo class selector E::selection
1), E:selection pseudo Class selectors are used to specify styles when an element is selected.
For example
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>伪类选择器E::selection</title>
<style>
::selection{
background: green;
color: #ffffff;
}
input[type="text"]::selection{
background: #ff6600;
color: #ffffff;
}
</style>
</head>
<body>
<h1>伪类选择器E::selection</h1>
<p>今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！</p>
<input type="text" placeholder="文本">
</body>
</html>6, E:invalid pseudo-class selector and E:valid pseudo-class selector
1), E The :invalid pseudo-class selector is used to specify the style when the element content cannot pass the check specified by HTML5 using attributes such as requirede of the element or the element content does not conform to the format specified by the element.
2). The E:valid pseudo-class selector is used to specify the style when the element content can pass the check specified by HTML5 by using attributes such as requirede of the element or when the element content conforms to the format specified by the element.
For example
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>E:invalid伪类选择器与E:valid伪类选择器</title>
<style>
input[type="email"]:invalid{
color: red;
}
input[type="email"]:valid{
color: green;
}
</style>
</head>
<body>
<h1>E:invalid伪类选择器与E:valid伪类选择器</h1>
<form>
<input type="email" placeholder="请输入邮箱">
</form>
</body>
</html>7, E:required pseudo-class selector and E:optional pseudo-class selector
1), E The :required pseudo-class selector is used to specify the styles of input elements, select elements, and textarea elements that are allowed to use the required attribute and have the required attribute specified.
2). The E:optional pseudo-class selector is used to specify the style of input elements, select elements and textarea elements that are allowed to use the required attribute and the required attribute is not specified.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>E:required伪类选择器与E:optional伪类选择器</title>
<style>
input[type="text"]:required{
background: red;
color: #ffffff;
}
input[type="text"]:optional{
background: green;
color: #ffffff;
}
</style>
</head>
<body>
<h1>E:required伪类选择器与E:optional伪类选择器</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名" required>
<br/>
<br/>
学校：<input type="text" placeholder="请输入学校">
</form>
</body>
</html>8. E:in-range pseudo-class selector and E:out-of-range pseudo-class selector
1), E: The in-range pseudo-class selector is used to specify the style when the valid value of the element is limited to a range and the actual input value is within this range.
2). The E:out-of-range pseudo-class selector is used to specify the style to be used when the effective value of the element is limited to a range, but the actual input value exceeds it.
For example
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>E:in-range伪类选择器与E:out-of-range伪类选择器</title>
<style>
input[type="number"]:in-range{
color: #ffffff;
background: green;
}
input[type="number"]:out-of-range{
background: red;
color: #ffffff;
}
</style>
</head>
<body>
<h1>E:in-range伪类选择器与E:out-of-range伪类选择器</h1>
<input type="number" min="0" max="100" value="0">
</body>
</html>The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
Analysis on the difference between using rgba and opacity to set transparency in css
The above is the detailed content of Analysis on css3 UI element status pseudo-class selector. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What does hover mean in css
Feb 22, 2024 pm 01:24 PM
:hover in CSS is a pseudo-class selector used to apply specific styles when the user hovers over a specific element. When the mouse hovers over an element, you can add different styles to it through :hover to enhance user experience and interaction. This article will discuss in detail: the meaning of hover and give specific code examples. First, let us understand the basic usage of :hover in CSS. In CSS, you can use a selector to select the element to which the :hover effect is to be applied, and add after it
How to remove the dot in front of the li tag in css
Apr 28, 2024 pm 12:36 PM
There are two ways to remove dots from li tags in CSS: 1. Use the "list-style-type: none;" style; 2. Use transparent images and "list-style-image: url("transparent.png"); "style. Both methods can remove the dots of all li tags. If you only want to remove the dots of certain li tags, you can use a pseudo-class selector.
The role of hover in html
Feb 20, 2024 am 08:58 AM
The role of hover in HTML and specific code examples In web development, hover refers to triggering some actions or effects when the user hovers the cursor over an element. It is implemented through the CSS :hover pseudo-class. In this article, we will introduce the role of hover and specific code examples. First, hover enables an element to change its style when the user hovers over it. For example, when hovering the mouse over a button, you can change the button's background color or text color to remind the user what to do next.
What does :: mean in css
Apr 28, 2024 pm 03:45 PM
The :: pseudo-class selector in CSS is used to specify a special state or behavior of an element, and is more specific than the pseudo-class selector : and can select specific attributes or states of an element.
How to use:nth-child(-n+5) pseudo-class selector to select the CSS style of child elements whose position is less than or equal to 5
Nov 20, 2023 am 11:52 AM
How to use:nth-child(-n+5) pseudo-class selector to select the CSS style of child elements whose position is less than or equal to 5. In CSS, the pseudo-class selector is a powerful tool that can be selected through a specific selection method. Certain elements in an HTML document. Among them, :nth-child() is a commonly used pseudo-class selector that can select child elements at specific positions. :nth-child(n) can match the nth child element in HTML, and :nth-child(-n) can match
Using the content property in CSS
Feb 19, 2024 am 10:56 AM
Usage of content attribute in CSS The content attribute in CSS is a very useful attribute, which is used to insert additional content in pseudo classes. The content attribute can generally only be used in pseudo-class selectors (such as ::before and ::after). It can be used to insert content such as text or images. We can achieve some very cool effects through the content attribute. The following are some uses of the content attribute and specific code examples: Insert text content through
Use the :nth-last-child(2) pseudo-class selector to select the style of the second-to-last child element
Nov 20, 2023 am 11:22 AM
Use the :nth-last-child(2) pseudo-class selector to select the style of the penultimate child element. Specific code examples are required. In CSS, the pseudo-class selector is a very powerful tool that can be used to select the document tree. specific elements. One of them is the :nth-last-child(2) pseudo-class selector, which selects the second-to-last child element and applies styles to it. First, let's create a sample HTML document so that we can use this pseudo-class selector in it. by
How to use hover in css
Feb 23, 2024 pm 12:06 PM
The hover pseudo-class in CSS is a very commonly used selector that allows us to change the style of an element when the mouse is hovering over it. This article will introduce the usage of hover and provide specific code examples. 1. Basic Usage To use hover, we need to first define a style for the element, and then use the :hover pseudo-class to specify the corresponding style when the mouse is hovering. For example, we have a button element. When the mouse hovers over the button, we want the background color of the button to change to red and the text color to white.
