CSS:伪类选择器focus

最新推荐文章于 2024-07-28 18:10:24 发布

张卡卡mg

最新推荐文章于 2024-07-28 18:10:24 发布

阅读量458

点赞数 6

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/weixin_45609811/article/details/101040887

版权

前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍了CSS中的:focus伪类选择器，该选择器用于当元素获得屏幕焦点（如通过鼠标点击或键盘导航）时应用样式。文章通过示例展示了如何为文本框添加焦点时的阴影效果，帮助读者理解:focus的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

focus------焦点
当我们鼠标点击谁，谁就是当时屏幕的焦点啦

下图是一个文本框，我们还没有点击它的时候
在这里插入图片描述
现在我们点它一下，它就有了阴影

下面看一下代码

<input class="get" type="test">	//定义文本框

CSS部分 ↓↓↓↓↓↓

.get{					
	height:100%;
	width:100%;
	outline:none;
	text-indent:10px;
	border:solid rgb(69,135,174) 1px;
}
.get:focus{										//伪类选择器
	box-shadow:1px 0px 4px rgb(98,153,236);		//阴影属性 ，四个值分别为  左右偏移 上下偏移  阴影模糊度  阴影颜色
}