: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

瀏覽器相容性

另見