:focus

CSS伪类 :focus 表示获得焦点的元素（如表单输入）。当用户点击或触摸元素或通过键盘的 tab 键选择它时会被触发。此伪类仅适用于焦点元素本身。如果要选择包含焦点元素的元素，请使用 :focus-within 。

语法:

E : focus { sRules }

设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。

• webkit内核浏览器会默认给 :focus 状态的元素加上outline的样式。
• CSS伪类 :focus 表示获得焦点的元素（如表单输入）。当用户点击或触摸元素或通过键盘的 tab 键选择它时会被触发。

浏览器支持

所有浏览器都支持 :focus

例子

/* selects any <input> when focused */
input:focus {
  color: red;
}

提示： 此伪类仅适用于焦点元素本身。如果要选择包含焦点元素的元素，请使用 :focus-within 。

//HTML

<input class="red-input" value="i'll be red when focused."><br>
<input class="blue-input" value="i'll be blue when focused.">

//CSS

.red-input:focus {
  background: yellow;
  color: red;
}

.blue-input:focus {
  background: yellow;
  color: blue;
}