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

Dragon水魅

发布于 2026-01-23 14:49:44

830

官方资料

鱼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>

: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>

: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>