css怎么选中聚焦的元素?

css怎么选中聚焦的元素?下面本篇文章给大家介绍一下使用CSS选中聚焦(获得焦点)元素的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

css怎么选中聚焦的元素?

在CSS中,可以使用:focus选择器来选中聚焦的元素。

:focus 选择器用于选取获得焦点的元素;可以设置html元素在成为输入焦点(该对象的onfocus事件发生)时的样式。

例如一个链接获取了焦点后可以通过按"回车"键激活链接。可以用键盘的Tab键的遍历页面中可以获取焦点的元素,可以参考HTML中的tabindex属性。如果虚线框环绕了一个链接元素,证明此链接元素获取了焦点。

提示:接收键盘事件或其他用户输入的元素都允许 :focus 选择器。

注意:

  • :focus 选择器选择器在IE8中必须声明<!DOCTYPE>

  • webkit内核浏览器会默认给:focus状态的元素加上outline的样式。

语法:

:focus { 
   style properties 
}

如:

a:focus {outline: 1px  dotted red;}
input:focus {background: yellow;}

css :focus实例

给input元素添加focus样式:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
input:focus
{
	background-color:yellow;
}
</style>
</head>
<body>

<p>点击文本输入框表单可以看到黄色背景:</p>

<form>
First name: <input type="text" name="firstname" /><br>
Last name: <input type="text" name="lastname" />
</form>

</body>
</html>

效果图:

1.gif

更多css的相关知识,可访问:web前端自学!!

以上就是css怎么选中聚焦的元素?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏