CSS
```
/* ! 状态伪类 */
fieldset {
display: inline-grid;
gap: 1em;
border-radius: 10px;
padding: 1em 2em;
color: #666;
background: linear-gradient(to left top, lightcyan, white);
}
fieldset legend {
text-align: center;
}
fieldset input {
padding: 5px;
border: none;
border-bottom: 1px solid #666;
outline: none;
background-color: transparent;
}
/* ! 表单状态伪类 */
/* ? 匹配获取到焦点的元素 */
fieldset :focus {
background-color: lightgreen;
transition: 0.4s;
}
/* ? 匹配被选中的复选框元素 */
input[type='checkbox']:checked + label {
color: red;
}
/* ? 当鼠标悬停在某个元素上的效果 */
button {
/* 去掉默认的边框与轮廓线 */
border: none;
outline: none;
/* 重置默认字体与背景色 */
background-color: seagreen;
color: white;
padding: 5px 10px;
/* 文字少,可适当拉开字间距 */
letter-spacing: 1em;
}
button:hover {
cursor: pointer;
/* 透明度 */
opacity: 0.8;
transition: 0.4s;
}
fieldset :disabled {
background-color: yellow;
}
```
HTML:
```
<!DOCTYPE html>
<html lang="zh-CN">
<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" />
<link rel="stylesheet" href="css/fake-status.css" />
<title>状态伪类选择器</title>
</head>
<body>
<!-- ? 状态伪类: <a>, <form> -->
<form action="">
<fieldset>
<legend>用户注册</legend>
<!-- ? autofocus: 布尔属性,自动获取焦点 -->
<input type="text" id="username" name="username" placeholder="用户名" required autofocus />
<input type="email" id="email" name="email" placeholder="邮箱" required disabled />
<input type="password" id="password" name="password" placeholder="密码" required />
<!-- ? 复选框默认是选中状态: checked -->
<div>
<input type="checkbox" id="rem" name="remember" checked />
<label for="rem">记住我</label>
</div>
<button>提交</button>
</fieldset>
</form>
</body>
</html>
```
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
