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

最新推荐文章于 2023-05-09 15:15:44 发布

Dragon水魅

最新推荐文章于 2023-05-09 15:15:44 发布

阅读量617

点赞数 1

分类专栏：零基础学习Web开发文章标签： html css

本文链接：https://blog.csdn.net/qq_43650934/article/details/109013722

版权

零基础学习Web开发专栏收录该内容

45 篇文章 2 订阅

订阅专栏

官方资料

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

Dragon水魅

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
零基础学习CSS(7)——:valid、:invalid、:in-range、:in-range、:out-of-range、:read-only、:read-write

官方资料鱼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.ht
复制链接

扫一扫