CSS3选择器-UI元素状态伪类选择器

最新推荐文章于 2024-07-24 21:48:20 发布

骑猪西征

最新推荐文章于 2024-07-24 21:48:20 发布

阅读量586

点赞数 2

分类专栏： CSS 笔记文章标签： css3 前端

本文链接：https://blog.csdn.net/weixin_57936267/article/details/124669468

版权

笔记同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

CSS

21 篇文章 1 订阅

订阅专栏

UI元素状态伪类选择器

E：enabled 匹配所有用户界面（form表单）中处于可用状态的E元素

E：disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素

E：checked 匹配所有用户界面（form表单）中处于选中状态的E元素

E：selection 匹配E元素中被用户选中或处于高亮状态的部分

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:enabled{
            /* background-color: yellowgreen; */
        }
        /* 默认是非禁用状态
        disabled 给标签加上禁用状态
        */
        input:disabled{
            background-color: beige;
        }

        input:focus{
            background-color: rgb(37, 199, 137);
        }
        /* input：focus  表示被选中之后会给其加上被选中状态的背景颜色
        焦点，会匹配此选择器
        */



        input[type=checkbox]{
            /* 去掉默认样式 */
            appearance:none;
            /* 然后小正框框就没了 */
            width: 20px;
            height: 20px;
            border: 1px solid black;
        }
        input:checked{
            background-color: brown;
        }
        /* checked-设置或返回checkbox是否应该被选中，其受到默认样式的管控
        Checkbox-对象代表一个 HTML 表单中的 一个选择框。
        在 HTML 文档中 <input type="checkbox"> 每出现一次，Checkbox 对象就会被创建。 */

        div::selection{
            background-color: chartreuse;
            color: brown;
        }
        /* 选中之后，div中的文字的背景颜色会变化，同时字体颜色也会改变，简单来说就是改变被选中文字的样式 */
    </style>
</head>
<body>
    <form action="">
        用户名：<input type="text" name="username"><br>
        密码：<input type="text" name="password"><br>

        记住用户名<input type="checkbox" name="checkbox"><br>

        <input type="submit" disabled>
<!-- disabled 给标签加上禁用状态 -->
    </form>

    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis molestias nostrum voluptatum veniam quisquam. Corporis quaerat earum eligendi consequatur cumque, atque blanditiis amet aliquam eius numquam, eos facilis consectetur ipsa!</div>
</body>
</html>

骑猪西征

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3选择器-UI元素状态伪类选择器

UI元素状态伪类选择器E：enabled 匹配所有用户界面（form表单）中处于可用状态的E元素E：disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素E：checked 匹配所有用户界面（form表单）中处于选中状态的E元素E：selection 匹配E元素中被用户选中或处于高亮状态的部分代码：<!DOCTYPE html><html lang="en"><head> <meta charset=".
复制链接

扫一扫

专栏目录