10.1 伪类 :focus
CSS伪类提供了很棒的工具，用于在各种状态下对元素进行样式化。通过它们可以改善用户与表单和网页上其他互动元素的交互体验。我们来看看如何使用伪类:focus、:hover、:disabled和:checked对输入元素（<input>）进行样式化。
伪类:focus应用于当表单元素获得焦点时的样式。这通常发生在单击元素或通过Tab键切换到该元素时。对获得焦点的元素进行样式化有助于用户更好地在表单中引导自己。
使用示例：
CSS
input:focus {
border-color: #4A90E2;
box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
outline: none;
}
HTML
<form>
<label for="name">名字:</label>
<input type="text" id="name" name="name">
</form>
解释
border-color: 改变元素获得焦点时的边框颜色box-shadow: 在元素周围添加阴影效果以突出显示outline: 移除浏览器默认的边框，替换为自定义样式
10.2 伪类 :hover
伪类:hover应用于当用户将鼠标悬停在元素上时的样式。这对元素的交互提供视觉反馈很有用。
使用示例：
CSS
input:hover {
border-color: #50E3C2;
background-color: #F0F8FF;
}
HTML
<form>
<label for="email">邮件:</label>
<input type="email" id="email" name="email">
</form>
解释
border-color: 改变鼠标悬停在元素上时的边框颜色background-color: 改变鼠标悬停在元素上时的背景颜色
10.3 伪类 :disabled
伪类:disabled应用于表单中被禁用的元素，即那些不活跃并且用户无法使用或更改的元素。这有助于用户了解元素无法进行交互。
使用示例：
CSS
input:disabled {
background-color: #E0E0E0;
color: #A0A0A0;
cursor: not-allowed;
}
HTML
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" disabled>
</form>
解释
background-color: 改变禁用元素的背景颜色，以显示其不活跃状态color: 改变禁用元素内部文本的颜色cursor: 将鼠标指针状态设为"not-allowed"，以视觉呈现该元素不可用
10.4 伪类 :checked
伪类:checked应用于处于选中状态的checkbox和radio类型元素。这让你可以对选中的元素进行样式化，使其更为醒目。
使用示例：
CSS
input[type="checkbox"]:checked,
input[type="radio"]:checked {
background-color: #4A90E2;
border-color: #4A90E2;
}
HTML
<form>
<label>
<input type="checkbox" name="option" checked>
选项 1
</label>
<label>
<input type="checkbox" name="option">
选项 2
</label>
<label>
<input type="radio" name="choice" checked>
选择 1
</label>
<label>
<input type="radio" name="choice">
选择 2
</label>
</form>
解释
background-color: 改变选中元素的背景颜色border-color: 改变选中元素的边框颜色
GO TO FULL VERSION