状态伪类选择器

最新推荐文章于 2025-09-12 14:20:04 发布

原创最新推荐文章于 2025-09-12 14:20:04 发布 · 512 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#状态伪类选择器

状态伪类选择器专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用状态伪类选择器为HTML表单元素设置不同状态下的样式，如选中状态的颜色变化和可用文本输入框的边框样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--用在表单元素中 -->
    <title>状态伪类选择器</title>
    <style>
        input:checked{
            color: #ff7300;
        }
        input[type="text"]:enabled{
            border: 1px solid red;
        }
          </style>

</head>
<body>

<form action="">
    <!--label标签：当鼠标点击内容时也会选中-->
    <label for="a">男</label>
    <input id="a" type="radio" name="sex" value="1"/>
    <label for="b">女</label>
    <input id="b" type="radio" name="sex" value="2"/>
    <!--点击"名字"鼠标就会跳转到输入框-->
    <label for="c">姓名</label>
    <input id="c" type="text" />
    <label for="e">地址</label>
    <input id="e" type="text" />
</form>
</body>
</html>