:focus

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

:focus CSS 伪类表示一个已获得焦点的元素(例如表单输入框)。当用户点击或轻触元素,或者使用键盘的 Tab 键选择元素时,通常会触发此伪类。

试一试

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 非文本对比度的焦点轮廓(可见焦点指示器)的情况下,直接移除焦点轮廓。

示例

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

浏览器兼容性

另见