我想知道是否有可能删除默认的蓝色和黄色辉光,当我点击一个文本输入/文本区域使用CSS?
当前回答
我发现删除“滑动门”类型输入按钮上的轮廓很有帮助,因为轮廓没有覆盖滑动门图像的正确“帽子”,使焦点状态看起来有点不稳定。
input.slidingdoorbutton:focus { outline: none;}
其他回答
我在一个有点击事件的div上经历了这一点,在20次搜索之后,我发现这个片段挽救了我的一天。
-webkit-tap-highlight-color: rgba(0,0,0,0);
这将禁用webkit移动浏览器中的默认按钮高亮显示
这是为那些关心可访问性的人提供的解决方案。
请不要使用outline:none;用于禁用焦点轮廓。如果你这样做,你是在扼杀网络的可访问性。有一种可行的方法。
看看我写的这篇文章,它解释了如何以一种可访问的方式删除边界。
简而言之,当我们检测到键盘用户时,只显示轮廓边框。一旦用户开始使用他的鼠标,我们禁用大纲。结果你得到了两者中最好的。
在基于webkit的浏览器中调整文本区域大小:
在文本区域设置max-height和max-width不会移除可视的调整大小手柄。试一试:
resize: none;
(是的,我同意“尽量避免做任何打破用户期望的事情”,但有时它确实是有意义的,例如在web应用程序的上下文中)
要从头定制webkit表单元素的外观和感觉:
-webkit-appearance: none;
当然!你也可以使用*从所有HTML元素中删除蓝色边框
*{
outline-color: transparent;
outline-style: none;
}
And
*{
outline: 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>