[css3] focus伪类选择器-获得焦点元素

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

YinJie…

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

阅读量1.2k

点赞数 3

分类专栏： css 文章标签： css3 css html

本文链接：https://blog.csdn.net/qq_49900295/article/details/123517144

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

:focus伪类选择器用于选取获得焦点的元素，这里我们主要针对的是表单元素
在这里插入图片描述
我们新建了一个非常简单的文本框，我想在我们的光标定到这的时候让边变成蓝色并且文本框变长，应该怎么做？

代码示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            input {
                margin: 300px;
                outline: none;
                width: 100px;
                transition: all 0.5s;
            }
            input:focus {
                width: 200px;
                border: 1px solid blue;
            }
        </style>
    </head>
    <body>
        <input type="text">
    </body>    
</html>

注意要给边框加一个transition实现过渡效果

实现效果：
请添加图片描述

YinJie…

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
[css3] focus伪类选择器-获得焦点元素

:focus伪类选择器用于选取获得焦点的元素，这里我们主要针对的是表单元素我们新建了一个非常简单的文本框，我想在我们的光标定到这的时候让边变成蓝色并且文本框变长，应该怎么做？代码示例：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-sc
复制链接

扫一扫