試一試
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 |
瀏覽器相容性
載入中…