1、7focus伪类选择器

最新推荐文章于 2024-06-04 09:30:59 发布

这一片月

最新推荐文章于 2024-06-04 09:30:59 发布

阅读量362

点赞数

分类专栏： css样式文章标签： css

本文链接：https://blog.csdn.net/qq_62865634/article/details/126454576

版权

focus伪类 input元素表单 :focus状态 CSS样式

关键词由CSDN通过智能技术生成

css样式专栏收录该内容

41 篇文章 1 订阅

订阅专栏

提示：focus伪类选择器用于焦点元素，焦点就是光标，一般情况下<input>类表单元素。

1、语法：

input:focus{

background-color：yellow；

}

解释：

当我们鼠标点击这个表单，那么它的表单会变色彩，必须是用这个“：focus”这个伪类选择器

自己代码展示：

<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-05-31 14:46:45
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-08-21 19:57:32
 * @FilePath: \code\前端代码\css学习知识\1.1什么是复合选择器\1.7focus伪类选择器.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<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">
    <title>获得光标才有颜色、结合表单用“：focus”</title>
    <style>
        input:focus {
            background-color: pink;
            color: red;
        }
    </style>
</head>

<body>

    <input type="text">
    <input type="text">


</body>

</html>

显示结果：