CSS :focus 选择器

最新推荐文章于 2025-10-08 10:48:07 发布

原创最新推荐文章于 2025-10-08 10:48:07 发布 · 426 阅读

0 ·

CC 4.0 BY-SA版权

HTML5/CSS3 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一个简单的CSS技巧，当HTML输入字段获得焦点时，背景颜色会变为红色，以此来提高用户交互体验。此方法适用于网页表单设计，通过:focus伪类实现视觉反馈。

一个输入字段获得焦点时选择的样式：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        input:focus{
            background-color: red;
        }
    </style>
   

</head>
<body>
    <form action="">
        <input type="text" name="">
    </form>
</body>
</html>

未获得焦点
在这里插入图片描述
获得焦点