:focus
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
尝试一下
label {
display: block;
margin-top: 1em;
}
input:focus {
background-color: lightblue;
}
select:focus {
background-color: ivory;
}
<form>
<p>Which flavor would you like to order?</p>
<label>Full Name: <input name="firstName" type="text" /></label>
<label
>Flavor:
<select name="flavor">
<option>Cherry</option>
<option>Green Tea</option>
<option>Moose Tracks</option>
<option>Mint Chip</option>
</select>
</label>
</form>
备注:
此伪类仅适用于焦点的元素自身。如果要选择包含焦点元素的元素,请使用 :focus-within
。
语法
css
:focus {
/* ... */
}
示例
HTML
html
<div><input class="red-input" value="当获得焦点时我将呈现红色。" /></div>
<div><input class="blue-input" value="当获得焦点时我将呈现蓝色。" /></div>
CSS
css
.red-input:focus {
background: yellow;
color: red;
}
.blue-input:focus {
background: yellow;
color: blue;
}
结果
无障碍考虑
请确保视力不佳的人可以看到视觉焦点指示器。这也将有利于任何在明亮空间(如室外阳光下)使用屏幕的人。WCAG 2.1 SC 1.4.11 非文本对比度 要求视觉焦点指示符的对比度至少为 3 比 1。
- 无障碍的视觉焦点指示:让你的网站更具焦点!设计有用且可用的焦点指示器的技巧
:focus { outline: none; }
永远不要为了仅移除焦点轮廓(可见的焦点指示),而不替换为符合 WCAG 2.1 SC 1.4.11 非文本对比度标准的焦点轮廓。
- 小建议:永远不要移除 CSS 轮廓
规范
Specification |
---|
HTML # selector-focus |
Selectors Level 4 # focus-pseudo |