UI元素状态伪类选择器

来源：互联网发布：数据建模师编辑：程序博客网时间：2024/06/05 04:31

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>选择器E:hover、E：active和E：focus</title>    <style>        input[type="text"]:hover{            background: aqua;                           }        input[type="text"]:focus{            background: bisque;        }        input[type="text"]:active{            background: blue;        }    </style></head><body><h1>选择器E:hover、E：active和E：focus</h1><form>    姓名：<input type="text" placeholder="请输入姓名">    <br/>    密码：<input type="password" placeholder="请输入密码"></form></body></html>

注意的是focus和active的顺序。

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>E:enabled伪类选择器和E:disenabled伪类选择器</title>    <style>        input[type="text"]:disabled{            background: green;        }        input[type="text"]:enabled{            background: #5c6a72;        }    </style></head><body><h1>E:enabled伪类选择器和E:disenabled伪类选择器</h1><form>    姓名：<input type="text" placeholder="请输入姓名" disabled>    <br/>    密码：<input type="text" placeholder="请输入密码"></form></body></html>

0 0