试一试
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 {
/* ... */
}
无障碍
确保视力低下的人也能看到视觉焦点指示器。这也会让在光线充足的地方(如阳光下的户外)使用屏幕的任何人受益。WCAG 2.1 SC 1.4.11 非文本对比度要求视觉焦点指示器至少达到 3:1 的对比度。
- 可访问的视觉焦点指示器:让你的网站聚焦!设计有用且可用的焦点指示器的技巧
:focus { outline: none; }
切勿在未替换为能通过WCAG 2.1 SC 1.4.11 非文本对比度的焦点轮廓(可见焦点指示器)的情况下,直接移除焦点轮廓。
- 快速提示:切勿移除 CSS 轮廓
示例
HTML
html
<div><input class="red-input" value="I'll be red when focused." /></div>
<div><input class="blue-input" value="I'll be blue when focused." /></div>
CSS
css
.red-input:focus {
background: yellow;
color: red;
}
.blue-input:focus {
background: yellow;
color: blue;
}
结果
规范
| 规范 |
|---|
| HTML # selector-focus |
| 选择器 Level 4 # focus-pseudo |
浏览器兼容性
加载中…