我想知道是否有可能删除默认的蓝色和黄色辉光,当我点击一个文本输入/文本区域使用CSS?
当前回答
在基于webkit的浏览器中调整文本区域大小:
在文本区域设置max-height和max-width不会移除可视的调整大小手柄。试一试:
resize: none;
(是的,我同意“尽量避免做任何打破用户期望的事情”,但有时它确实是有意义的,例如在web应用程序的上下文中)
要从头定制webkit表单元素的外观和感觉:
-webkit-appearance: none;
其他回答
Carl W:
这种效果也会发生在非输入元素上。我发现下面是一个更通用的解决方案 :专注{ 边框色:透明; outline-style:没有; }
我来解释一下:
:focus意味着它对焦点中的元素进行样式化。因此,我们对焦点中的元素进行样式化。 边框色:透明;意味着蓝光是透明的。 outline-style:没有;做同样的事情。
编辑(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;
}
有时也会发生按钮,然后使用下面来删除外线
input:hover
input:active,
input:focus,
textarea:active,
textarea:hover,
textarea:focus,
button:focus,
button:active,
button:hover
{
outline:0px !important;
}