我已经看到chrome在:focus
上放了一个更粗的边框,但在我的例子中,它看起来有点不对劲,我也使用了边框半径。有什么方法可以去掉它吗?
发布于 2013-07-08 20:17:32
我必须执行以下所有操作才能将其完全删除:
outline-style: none;
box-shadow: none;
border-color: transparent;
示例:
button {
border-radius: 20px;
padding: 20px;
}
.no-focusborder:focus {
outline-style: none;
box-shadow: none;
border-color: transparent;
background-color: black;
color: white;
}
<p>Click in the white space, then press the "Tab" key.</p>
<button>Button 1 (unchanged)</button>
<button class="no-focusborder">Button 2 (no focus border, custom focus indicator to show focus is present but the unwanted highlight is gone)</button>
<br/><br/><br/><br/><br/><br/>
发布于 2011-07-06 18:56:25
要删除默认焦点,请在默认.css文件中使用以下内容:
:focus {outline:none;}
然后,可以按元素单独控制焦点边框颜色,也可以在默认.css中控制焦点边框颜色:
:focus {outline:none;border:1px solid red}
显然用你选择的十六进制代码替换red
。
您还可以保持边框不变,并控制背景颜色(或图像)以突出显示该字段:
:focus {outline:none;background-color:red}
:-)
发布于 2013-04-19 14:29:28
这肯定行得通。橙色轮廓将不再显示..对所有标签通用:
*:focus {
outline: none;
}
特定于某些标签,例如: input标签
input:focus{
outline:none;
}
https://stackoverflow.com/questions/2943548
复制相似问题