当我们在网页上使用键盘或鼠标点击某个元素时,这个元素就会被激活并获取焦点。默认情况下,激活的元素会显示出焦点样式,通常是一个蓝色的边框。这样的样式在某些情况下可能会引起不必要的干扰或者页面美观上的瑕疵,因此,我们需要去掉焦点样式。
/* 去掉链接元素的焦点样式 */ a:focus { outline: none; } /* 去掉输入框元素的焦点样式 */ input:focus { outline: none; } /* 去掉其他元素的焦点样式 */ :focus { outline: none; }
上述代码展示了如何在CSS中去掉不同元素的焦点样式。我们可以通过指定:focus
伪类选择器来对激活元素的样式进行修改。具体地,给outline
属性设置为none
即可去掉焦点样式。
需要注意的是,outline:none
样式虽然能够去掉焦点样式,但是如果页面中有一些键盘可访问的元素,如链接和表单元素,去掉其焦点样式会导致键盘辅助功能不可用。因此,在进行此类操作时需要进行权衡和考虑。