js学习-UI元素状态伪类选择器上

最新推荐文章于 2024-05-24 00:34:26 发布

kaka_hikun

最新推荐文章于 2024-05-24 00:34:26 发布

阅读量146

点赞数

分类专栏： js学习文章标签： javascript

本文链接：https://blog.csdn.net/weixin_48235555/article/details/106498954

版权

js学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

1、E:hover, E:active, E:focus

E:hover 鼠标移动在上面
E:active 被点击且未弹起
E:focus 点击后，可输入文本状态
实际操作中，要先写E:focus，再写E:active，不然无法实现E:active的代码

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

E:enabled 可用
E:disabled 不可用 如果是文本框，则disabled是不能输入文本

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

E:read-only 只能读，不能输入
E:read-write 可读可输入

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>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>read-only伪类选择器与E:read-write伪类选择器</h1>
<form>
    姓名：<input type="text" placeholder="请输入姓名" value="朱朝兵" readonly>  <!--只能读出value所指的值，但是不能修改它不能输入-->
    <br/>
    <br/>
    学校：<input type="text" placeholder="请输入学校">
</form>
</body>
</html>

4、E:checked, E:default, E:indeterminate

E:checked

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>checked伪类选择器</title>
    <style>
        input[type="checkbox"]:checked{
            outline: 7px solid green;  /*被选中后，会出现outline*/
        }
    </style>
</head>
<body>
<h1>checked伪类选择器</h1>
<form>
    房屋状态：
    <input type="checkbox">水
    <input type="checkbox">电
    <input type="checkbox">气
    <input type="checkbox">光纤
</form>
</body>
</html>

E:defaul

只适用于被选中的框(input type=“checkout” checked)

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

E:indeterminate

适应于单选框中，没有任何一个单选框被选中时，整组单选框的样式

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>indeterminate伪类选择器</title>
    <style>
        input[type="radio"]:indeterminate{
            outline: 2px solid green;  /*选中后，将不再出现这个outline*/
        }
    </style>
</head>
<body>
<h1>indeterminate伪类选择器</h1>
<form>
    性别：
    <input type="radio">男
    <input type="radio">女
</form>
</body>
</html>

kaka_hikun

关注

0
点赞
踩
0

收藏

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

1、E:hover, E:active, E:focusE:hover 鼠标移动在上面E:active 被点击且未弹起E:focus 点击后，可输入文本状态实际操作中，要先写E:focus，再写E:active，不然无法实现E:active的代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>选择器E:hover、E:
复制链接

扫一扫