零基础学习CSS(7)——:valid、:invalid、:in-range、:in-range、:out-of-range、:read-only、:read-write_css --ag-invalid-color

作者：盐析白兔 | 2024-03-24 02:58:15

踩

css --ag-invalid-color

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/
html5速查手册：https://man.ilovefishc.com/html5/
css速查手册：https://man.ilovefishc.com/css3/

学习正文

:valid 选择器：https://man.ilovefishc.com/pageCSS3/dotValid.html
:invalid 选择器：https://man.ilovefishc.com/pageCSS3/dotInvalid.html
:in-range 选择器：https://man.ilovefishc.com/pageCSS3/dotInRange.html
:out-of-range 选择器：https://man.ilovefishc.com/pageCSS3/dotOut-of-range.html
:read-only 选择器：https://man.ilovefishc.com/pageCSS3/dotread-only.html
:read-write 选择器：https://man.ilovefishc.com/pageCSS3/dotread-write.html

通过:valid 选择器和:invalid 选择器设置输入合法与非法时的样式：

<!DOCTYPE html>
<html>
<head>
    <title>伪类选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
    /* 设置输入合法与非法对应的样式 */
        input:valid{
            border: 2px solid green;
        }
        input:invalid {
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <form>
        <input type="email" placeholder="请输入邮箱^o^">
        <button type="submit">提交</button>
    </form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

:in-range 选择器和out-of-range 选择器可以设置输入数字在范围内和不再范围内对应的样式：

<!DOCTYPE html>
<html>
<head>
    <title>伪类选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
    /* 设置输入数字在范围内和不再范围内对应的样式 */
        input:in-range {
            border: 2px solid green;
        }
        input:out-of-range {
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <form>
        <input type="number" min="0" max="99" value="66">
        <button type="submit">提交</button>
    </form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

:read-only 选择器和read-write 选择器设置只读和可读可写的样式：

<!DOCTYPE html>
<html>
<head>
    <title>伪类选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
    /* 设置只读和可读可写的样式 */
        input:read-only {
            background-color: red;
        }
        input:read-write {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <form>
        <p>普通的 input 输入框：<input type="text"></p>
        <p>只读的 input 输入框：<input type="text" readonly></p>
        <button type="submit">提交</button>
    </form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/299414?site