我想知道是否有可能在使用CSS单击文本输入/文本区域时删除默认的蓝色和黄色发光?
我想知道是否有可能在使用CSS单击文本输入/文本区域时删除默认的蓝色和黄色发光?
Answers:
textarea, select, input, button { outline: none; }
虽然,有人认为保留光晕/轮廓实际上对可访问性有益,因为它可以帮助用户查看当前聚焦于哪个Element。
您也可以使用伪元素':focus'来仅在用户选择了输入时定位输入。
这种效果也可能发生在非输入元素上。我发现以下作品可以作为更通用的解决方案
:focus {
outline-color: transparent;
outline-style: none;
}
更新:您可能不必使用:focus
选择器。如果您有一个元素,例如说<div id="mydiv">stuff</div>
,并且您正在此div元素上获得外部辉光,则像通常一样应用:
#mydiv {
outline-color: transparent;
outline-style: none;
}
<button>
,这适用于元素,因为它们通常不会在焦点上发光,因为大多数情况下您都可以单击它。
45.0.2454.101 m
:focus
选择器,只是将outline-color
和outline-style
放在了div的CSS上。
在基于Webkit的浏览器中调整textarea大小时:
在textarea上设置max-height和max-width不会删除视觉调整手柄。尝试:
resize: none;
(是的,我同意“尝试避免做任何会破坏用户期望的事情”,但有时确实是有道理的,即在Web应用程序的上下文中)
要从头开始自定义Webkit表单元素的外观:
-webkit-appearance: none;
none
,both
,horizontal
,vertical
,和inherit
。
有时候,按钮也会在下面使用,以删除外线
input:hover
input:active,
input:focus,
textarea:active,
textarea:hover,
textarea:focus,
button:focus,
button:active,
button:hover
{
outline:0px !important;
}
<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;}
我只需要从文本输入字段中删除此效果,就无法使其他技术正常工作,但这对我来说是有效的。
input[type="text"], input[type="text"]:focus{
outline: 0;
border:none;
box-shadow:none;
}
在Firefox和Chrome中进行了测试。
当然!您也可以使用*从所有HTML元素中删除蓝色边框
*{
outline-color: transparent;
outline-style: none;
}
和
*{
outline: none;
}