css---UI元素状态伪类选择器上

最新推荐文章于 2022-09-20 17:54:41 发布

gqhp

最新推荐文章于 2022-09-20 17:54:41 发布

阅读量347

点赞数

文章标签： css

本文链接：https://blog.csdn.net/sjpgyy/article/details/106587877

版权

css—UI元素状态伪类选择器上

1.选择器E:hover,E:active和E:focus

1）E:hover选择器被用来指定当鼠标指针移动到元素上时元素所使用的样式；
<元素>：hover{
css样式
}
在“<元素>”中添加元素的type属性。
例：input[type=“text”]:hover{
css样式
}

2)E:active选择器被用来指定元素被激活时使用的样式

3）E:focus选择器被用来指定元素获得光标聚焦点使用的样式，主要是在文本框控件获得聚焦点并进行文字输入时使用。

4）小案例：
结合上诉实现以下效果，当鼠标移动上去是文本框变成绿色，当鼠标点击时（点击并未弹起）文本框处于蓝色，当处于可输入状态时文本框变成橙色

<!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伪类选择器与E:disabled伪类选择器

1）.E:enabled选择器被用来指定当元素处于可用状态时的样式；
2）E:disabled选择器被用来指定当元素处于不可用状态时的样式；
3）小案例：
结合上诉实现以下效果，文本框可用时背景颜色绿色，不可用时背景变成浅灰色

<!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伪类选择器与E：read-write伪类选择器

1）read-only选择器被用来指定当元素处于只读状态时的样式；
2）read-write选择器被用来指定当元素处于非只读状态时的样式；
3）小案例
结合上诉实现以下效果，文本框可用时输入文字变成红色，不可用时，设置里面的背景为黑色，文字为绿色。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>.E：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>.E：read-only伪类选择器与E：read-write伪类选择器</h1>
<form>
    姓名：<input type="text" placeholder="请输入姓名"  value ="朱朝彬" read-only>
    <br/>
    <br/>
     学校：<input type="text" placeholder="请输入学校" read-write>
</form>
</body>
</html>

4.伪类选择器E：checked，E:default和indeterminate

1)E：checked伪类选择器用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式；

2）E:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框的控件的样式；

3）E：indeterminate选择器用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选中状态时，整组单选框的样式；

4）小案例：

A：模拟一个发布房产信息的选框控件，当选择以后，会给他一个2px实线绿色的边框效果；

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

B：实线一个默认选择中的控件，默认给他一个2px实线绿色的边框！

<!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>checked伪类选择器</h1>
<form>
    房屋状态：
    <input type="checkbox" checked>水
    <input type="checkbox">电
    <input type="checkbox">气
    <input type="checkbox">光纤
</form>
</body>
</html>

C：实现一个在默认打开都没有选中时，给他们一个2px实线绿色的边框！


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