:focus | CSS属性参考

CSS :focus伪类选择器用于匹配当前获取焦点的元素,这个元素通常是表单元素,通过键盘tab键或用户鼠标点击使其获取焦点。

<input><button><textarea>等表单元素可以通过键盘的Tab键或鼠标点击来获取焦点。

当用户使用Tab键来切换页面中元素的焦点时,通常在当前获取焦点的元素上会显示一个灰色的虚线框或蓝色的边框,代表这个元素是焦点元素。这是浏览器的默认行为,各个浏览器渲染的虚线框和蓝色边框的行为不完全相同。

浏览器会使用outline属性为当前聚焦元素的:focus伪类设置样式。如果你想设置自己的元素聚焦样式,可以先将浏览器的默认样式移除,方法是在:focus伪类设置outline: 0;使外边框不可见,然后再添加你自己的样式。例如:

a:focus {
    outline: 0;
    /* 在这里添加自己的样式 */
}

如果你想为一个超链接元素使用:focus伪类,建议将:focus伪类写在:link:visited伪类之后,否则:focus伪类的样式会被:link:visited伪类的样式覆盖。另外,用于为超链接设置样式的伪类还有:hover:active伪类,这两个伪类可以写在:focus的后面,

示例代码

下面的代码为超链接元素设置自定义的聚焦样式。

a:link {
    color: #0099cc;
}

a:visited {
    color: grey;
}

a:focus {
    background-color: black;
    color: white;
}

a:hover {
    border-bottom: 1px solid #0099cc;
}

a:active {
    background-color: #0099cc;
    color: white;
}

下面的代码为获取焦点的input元素和textarea元素设置白色的背景和黄色的边框。

input:focus, textarea:focus {
    background-color: #FFFF66;
    border: 1px solid #F47E58;
}
浏览器支持

所有的现代浏览器都支持:focus伪类选择器,包括:Chrome, Firefox, Safari, Opera7+, Internet Explorer 7+ 以及 Android 和 iOS。

相关阅读
未经允许不得转载:yiweibang.com易微帮 » :focus | CSS属性参考
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请不要用于商业用途!
3. 如有链接无法下载、失效或广告,请联系站长处理!
4. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
5. 如果你也有好模型或者教程,可以到审核区发布,分享有金币奖励和额外收入!
6. 本站提供的模型、教程、施工图等等其他资源,都不包含技术服务 请大家谅解!
7. 如遇到加密压缩包,默认解压密码为yiweibang.com如遇到无法解压的请联系管理员!
分享到:
赞(0)