:focus

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

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

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

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

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

如果你想为一个超链接元素使用 :focus 伪类，建议将 :focus 伪类写在和伪类之后，否则 :focus 伪类的样式会被和伪类的样式覆盖。另外，用于为超链接设置样式的伪类还有和伪类，这两个伪类可以写在 :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。

查看更多关于:focus的详细内容...