删除Safari/Chrome textinput/textarea辉光

我想知道是否有可能删除默认的蓝色和黄色辉光，当我点击一个文本输入/文本区域使用CSS?

285606 次浏览
小开
最佳答案

编辑(11年后):不要这样做，除非您要提供一个回退来指示哪个元素是活动的。否则，这会损害可访问性，因为它实际上删除了显示文档中哪个元素具有焦点的指示。想象一下，你是一个键盘用户，却不知道你可以与什么元素交互。在这里，让易用性胜过美学。

textarea, select, input, button { outline: none; }

尽管，有人认为保持发光/轮廓实际上有利于可访问性，因为它可以帮助用户看到当前关注的元素。

您还可以使用伪元素':focus'来只针对用户选择的输入。

演示:https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/

小开

在基于webkit的浏览器中调整文本区域大小:

在文本区域设置max-height和max-width不会移除可视的调整大小手柄。试一试:

resize: none;

(是的，我同意“尽量避免做任何打破用户期望的事情”，但有时它确实是有意义的，例如在web应用程序的上下文中)

要从头定制webkit表单元素的外观和感觉:

-webkit-appearance: none;
小开

这种效果也会发生在非输入元素上。我发现下面是一个更通用的解决方案

:focus {
outline-color: transparent;
outline-style: none;
}

你可能不必使用:focus选择器。如果你有一个元素，比如<div id="mydiv">stuff</div>，并且你在这个div元素上得到了外部发光，就像正常应用一样:

#mydiv {
outline-color: transparent;
outline-style: none;
}
小开 
<select class="custom-select">
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
</select>


<style>
.custom-select {
display: inline-block;
border: 2px solid #bbb;
padding: 4px 3px 3px 5px;
margin: 0;
font: inherit;
outline:none; /* remove focus ring from Webkit */
line-height: 1.2;
background: #f8f8f8;


-webkit-appearance:none; /* remove the strong OSX influence from Webkit */


-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/* for Webkit's CSS-only solution */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.custom-select {
padding-right:30px;
}
}


/* Since we removed the default focus styles, we have to add our own */
.custom-select:focus {
-webkit-box-shadow: 0 0 3px 1px #c00;
-moz-box-shadow: 0 0 3px 1px #c00;
box-shadow: 0 0 3px 1px #c00;
}


/* Select arrow styling */
.custom-select:after {
content: "▼";
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #bbb;
color: white;


pointer-events:none;


-webkit-border-radius: 0 6px 6px 0;
-moz-border-radius: 0 6px 6px 0;
border-radius: 0 6px 6px 0;
}
</style>
小开

我发现删除“滑动门”类型输入按钮上的轮廓很有帮助，因为轮廓没有覆盖滑动门图像的正确“帽子”，使焦点状态看起来有点不稳定。

input.slidingdoorbutton:focus { outline: none;}
小开

如果你想移除Bootstrap中按钮的辉光(在我看来这并不一定是糟糕的用户体验)，你需要以下代码:

.btn:focus, .btn:active:focus, .btn.active:focus{
outline-color: transparent;
outline-style: none;
}
小开

Carl W:

这种效果也会发生在非输入元素上。我发现下面是一个更通用的解决方案

:focus {
outline-color: transparent;
outline-style: none;
}

我来解释一下:

  • :focus表示它为焦点中的元素设置样式。因此，我们对焦点中的元素进行样式化。
  • outline-color: transparent;表示蓝色辉光是透明的。
  • outline-style: none;做同样的事情。
小开

有时也会发生按钮，然后使用下面来删除外线

input:hover
input:active,
input:focus,
textarea:active,
textarea:hover,
textarea:focus,
button:focus,
button:active,
button:hover
{
outline:0px !important;
}
小开

我只需要从我的文本输入字段中删除这种效果，我不能让其他技术工作得很好，但这对我来说是有效的;

input[type="text"], input[type="text"]:focus{
outline: 0;
border:none;
box-shadow:none;


}

在Firefox和Chrome中进行了测试。

小开

我在一个div上经历了这个，它有一个点击事件，经过20次搜索后，我发现这个片段挽救了我的一天。

-webkit-tap-highlight-color: rgba(0,0,0,0);

这将禁用webkit移动浏览器中的默认按钮高亮显示

小开

这是人们要关心易用性的解决方案。

请不要使用outline:none;来禁用焦点轮廓。如果你这样做，你是在扼杀网络的可访问性。有一种可行的方法。

查看我写的这篇文章来解释如何以一种可访问的方式删除边界。

简而言之，当我们检测到键盘用户时，只显示轮廓边框。一旦用户开始使用他的鼠标，我们禁用大纲。结果你得到了两者中最好的。

小开

当然!你也可以使用*从所有HTML元素中删除蓝色边框

*{
outline-color: transparent;
outline-style: none;
}

和

 *{
outline: none;
}
小开

这个解决方案对我很有效。

input:focus {
outline: none !important;
box-shadow: none !important;
}

提交答案