我想知道是否有可能删除默认的蓝色和黄色辉光,当我点击一个文本输入/文本区域使用CSS?
编辑(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元素上得到了外部发光,就像正常应用一样:
:focus
<div id="mydiv">stuff</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; }
我来解释一下:
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次搜索后,我发现这个片段挽救了我的一天。
div
-webkit-tap-highlight-color: rgba(0,0,0,0);
这将禁用webkit移动浏览器中的默认按钮高亮显示
这是人们要关心易用性的解决方案。
请不要使用outline:none;来禁用焦点轮廓。如果你这样做,你是在扼杀网络的可访问性。有一种可行的方法。
outline:none;
查看我写的这篇文章来解释如何以一种可访问的方式删除边界。
简而言之,当我们检测到键盘用户时,只显示轮廓边框。一旦用户开始使用他的鼠标,我们禁用大纲。结果你得到了两者中最好的。
当然!你也可以使用*从所有HTML元素中删除蓝色边框
*{ outline-color: transparent; outline-style: none; }
和
*{ outline: none; }
这个解决方案对我很有效。
input:focus { outline: none !important; box-shadow: none !important; }