: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; }