CSS :focus 选择器用于选择获得焦点的元素。它可以用来调整元素的外观,以更好地提示用户,以及为元素添加特定的样式。
使用方法
要使用CSS :focus 选择器,需要指定元素的 :focus 状态,可以使用如下代码:
input:focus { background-color: #ddd; border: 1px solid #999; }
上面的代码表示,当输入框获得焦点时,背景颜色将变为 #ddd,边框颜色将变为 #999。还可以添加其他样式,如字体颜色、字体大小等。
也可以使用 :focus 选择器来调整元素的位置,比如:
input:focus { position: absolute; left: 10px; top: 10px; }
上面的代码表示,当输入框获得焦点时,它的位置将变为绝对定位,左边距为 10px,上边距为 10px。
注意事项
- CSS :focus 选择器只能用于可以获得焦点的元素,比如文本框、按钮、链接等。
- CSS :focus 选择器只能在现代浏览器中使用,不支持旧版本的浏览器。