如何重置/删除铬's输入高亮/焦点边界?

我已经看到chrome在:focus上设置了更厚的边界,但在我使用border-radius的情况下,它看起来有点像。有办法移除它吗?

image: chrome:focus border

507751 次浏览

你应该可以用

outline: none;

但请记住,这可能对可用性不利:很难判断一个元素是否被聚焦,当你使用选项卡键遍历所有表单的元素时,这很糟糕——当一个元素被聚焦时,你应该以某种方式反映。

你可以将outline: none;和border设置为不同的焦点颜色。

要删除默认焦点,请在默认的.css文件中使用以下内容:

:focus {outline:none;}

然后你可以通过元素单独控制焦点边框的颜色,或者在默认的.css中:

:focus {outline:none;border:1px solid red}

显然,用你选择的十六进制代码替换red

你也可以保持边界不变,并控制背景颜色(或图像)来突出显示字段:

:focus {outline:none;background-color:red}

: -)

这肯定有用。橙色的轮廓不会再出现了。 所有标签通用:

*:focus {
outline: none;
}

特定于某些标记,例如:input标记

input:focus{
outline:none;
}

我必须做以下所有的事情来完全删除它:

outline-style: none;
box-shadow: none;
border-color: transparent;
< p >的例子:
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/>

问题是你已经有了一个大纲。Chrome仍然改变了一些东西,这是一个真正的痛苦。我不知道该改变什么:

.search input {
outline: .5em solid black;
width:41%;
background-color:white;
border:none;
font-size:1.4em;
padding: 0 0.5em 0 0.5em;
border-radius:3px;
margin:0;
height:2em;
}


.search input:focus, .search input:hover {
outline: .5em solid black !important;
box-shadow:none;
border-color:transparent;;
}


.search button {
border:none;
outline: .5em solid black;
color:white;
font-size:1.4em;
padding: 0 0.9em 0 0.9em;
border-radius: 3px;
margin:0;
height:2em;
background: -webkit-gradient(linear, left top, left bottom, from(#4EB4F8), to(#4198DE));
background: -webkit-linear-gradient(#4EB4F8, #4198DE);
background: -moz-linear-gradient(top, #4EB4F8, #4198DE);
background: -ms-linear-gradient(#4EB4F8, #4198DE);
background: -o-linear-gradient(#4EB4F8, #4198DE);
background: linear-gradient(#4EB4F8, #4198DE);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4EB4F8', endColorstr='#4198DE');
zoom: 1;
}

No focus With focus

.

最简单的方法是使用像这样的东西,但注意它可能不是那么好。

input {
outline: none;
}

我希望这对你有用。

border:0;
outline:none;
box-shadow:none;

这应该能奏效。