删除Safari / Chrome textinput / textarea发光
我想知道是否有可能删除默认的蓝色和黄色的光芒，当我点击一个文本input/文本区域使用CSS？
textarea, input, button { outline: none; } 虽然，有人认为保持辉光/轮廓实际上对于可访问性是有益的，因为它可以帮助用户看到哪个元素当前集中。
您也可以使用伪元素:focus只在用户select它们时指定input。
演示： https ： //jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/
这种效果也可以发生在非input元素上。 我发现以下作品是一个更一般的解决scheme
:focus { outline-color: transparent; outline-style: none; }
更新：您可能不必使用:focusselect器。 如果你有一个元素，比如<div id="mydiv">stuff</div> ，并且你在这个div元素上获得了外在的光芒，
#mydiv { outline-color: transparent; outline-style: none; }
在基于webkit的浏览器中调整textarea的大小：
在textarea上设置最大高度和最大宽度不会删除可视化的大小调整手柄。 尝试：
resize: none;
（是的，我同意“尽量避免做任何违背用户期望的事情”，但是有时它确实有意义，也就是说，在Web应用程序的情况下）
从头开始自定义webkit表单元素的外观：
-webkit-appearance: none;
Carl W：
这种效果也可以发生在非input元素上。 我发现以下作品是一个更一般的解决scheme
:focus { outline-color: transparent; outline-style: none; }
我会解释一下：
-
:focus意味着它的风格是重点的元素。 所以我们正在devise重点元素。 -
outline-color: transparent;意味着蓝色的光芒是透明的。 -
outline-style: none;做同样的事情。
对于那些关心可访问性的人来说，这是一个解决scheme。
请不要使用outline:none; 禁用焦点大纲。 如果你这样做，你正在杀死networking的可访问性。 有一个方便的方法来做到这一点。
看看我写的这篇文章来解释如何以可访问的方式删除边框。
简而言之，我们只是在检测键盘用户时才显示轮廓边框。 一旦用户开始使用他的鼠标，我们禁用轮廓。 结果你得到了最好的两个。
如果你想从Bootstrap中删除button（这在我看来不一定是坏的UX），你需要下面的代码：
.btn:focus, .btn:active:focus, .btn.active:focus{ outline-color: transparent; outline-style: none; }
我经历了一个有点击事件的div ，在20次search之后，我发现这个片段保存了我的一天。
-webkit-tap-highlight-color: rgba(0,0,0,0);
这会禁用webkit移动浏览器中的默认button高亮显示
<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>
我发现删除“滑动门”types的inputbutton上的轮廓是有帮助的，因为轮廓不包括滑动门图像的右“帽”，使得焦点状态看起来有些不可思议。
input.slidingdoorbutton:focus { outline: none;}
有时候会发生button，然后用下面的方法去除外线
input:hover input:active, input:focus, textarea:active, textarea:hover, textarea:focus, button:focus, button:active, button:hover { outline:0px !important; }
我只是需要从我的文本input字段中删除这个效果，我不能让其他技术工作得很好，但是这对我是有用的;
input[type="text"], input[type="text"]:focus{ outline: 0; border:none; box-shadow:none; }
在Firefox和Chrome中testing
当然！ 您也可以从所有HTML元素中删除蓝色边框，使用*
*{ outline-color: transparent; outline-style: none; }
和
*{ outline: none; }
