语法
:focus {
css declarations;
}
:focus 选择器的例子：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input:focus {
background-color: #ccc;
}
</style>
</head>
<body>
<h2>:focus selector example</h2>
<form>
Name:
<input type="text" name="name"> Surname:
<input type="text" name="surname">
</form>
</body>
</html>
带有 <label> 标签的 :focus 选择器示例：
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input[type=text] {
width: 100px;
-webkit-transition: width .2s ease-in-out;
-moz-transition: width .2s ease-in-out;
-o-transition: width .2s ease-in-out;
transition: width .2s ease-in-out;
}
input[type=text]:focus {
width: 150px;
background-color: #eee;
}
</style>
</head>
<body>
<h2>:focus selector example</h2>
<form>
<label for="search">Search:</label>
<input type="text" name="search" id="search">
</form>
</body>
</html>
可访问性问题
视觉焦点指示器应该可供所有人使用。
根据 WCAG 2.1 SC 1.4.11 Non-Text Contrast，视觉焦点指示器应至少为 3 比 1.
移除焦点轮廓（可见焦点指示器）时，始终将其替换为通过 WCAG 2.1 SC 1.4.11 非文本对比度的焦点轮廓。
:focus {
outline: none;
}
:focus 选择用户关注的元素并为其设置样式。
<input>、<button> 和 <textarea> 等元素可以通过使用键盘的 Tab 键或者单击来接收焦点。
日期：2020-06-02 22:14:30 来源：oir作者：oir