删除Safari/Chrome textinput/textarea发光

Question

我想知道是否有可能删除默认的蓝色和黄色发光，当我点击文本输入/文本区域使用CSS？

Answer 1

textarea, input, button { outline: none; } 

虽然，它被认为保持发光/轮廓可访问实际有益的，因为它可以帮助用户了解哪些元素是目前的重点。

您还可以使用伪元素:focus仅在用户选择它们时才将输入作为目标。

演示：https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/

Answer 2

在基于WebKit浏览器的textarea调整大小：

上textarea的设置最大高度和最大宽度不会删除视觉调整手柄。尝试：

resize: none; 

（是的，我同意“尽量避免做任何它打破了用户的期望”，但有时也有一定道理，即在web应用的上下文中）

要定制从头开始的webkit表单元素的外观和感觉：

-webkit-appearance: none; 

Answer 3

此效果也可能发生在非输入元素上。我发现了以下工作为一个更通用的解决方案

:focus { 
    outline-color: transparent; 
    outline-style: none; 
} 

---

更新：您可能没有使用:focus选择。如果你有一个元素，说<div id="mydiv">stuff</div>，你都拿到这个div元素外发光，只适用于像正常：

#mydiv { 
    outline-color: transparent; 
    outline-style: none; 
} 

Answer 4

<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> 

Answer 5

我发现它有助于去除在“拉门”大纲类型的输入按钮，因为轮廓不包括滑动门图像的右“帽”，使得聚焦状态看起来有点不可思议。

input.slidingdoorbutton:focus { outline: none;} 

Answer 6

如果要删除从引导按钮辉光（这是不是在我看来一定是坏事UX），你需要下面的代码：

.btn:focus, .btn:active:focus, .btn.active:focus{ 
    outline-color: transparent; 
    outline-style: none; 
} 

Answer 7

卡尔宽：

这种效果也可能出现在非输入元素上。我发现了以下工作为一个更通用的解决方案

:focus { outline-color: transparent; outline-style: none; }

我会解释这一点：

• :focus意味着它的风格是焦点中的元素。所以我们正在设计重点元素。
• outline-color: transparent;表示蓝色发光是透明的。
• outline-style: none;做同样的事情。

Answer 8

一些时候，它会发生按键也然后使用以下删除outerline

input:hover 
input:active, 
input:focus, 
textarea:active, 
textarea:hover, 
textarea:focus, 
button:focus, 
button:active, 
button:hover 
{ 
    outline:0px !important; 
} 

Answer 9

我只是需要从我的文字输入字段删除此效果，我不能让其他技术合作很对，但这对我来说很有用;

input[type="text"], input[type="text"]:focus{ 
      outline: 0; 
      border:none; 
      box-shadow:none; 

    } 

在Firefox和Chrome中测试。

Answer 10

我在div上遇到过这种情况，它有一个点击事件，经过20次搜索后，我发现这段代码保存了我的一天。

-webkit-tap-highlight-color: rgba(0,0,0,0); 

这禁用的WebKit的默认按钮高亮移动浏览器

Answer 11

这是人们做有关辅助护理解决方案。

请不要使用outline:none;禁用焦点大纲。如果你这样做，你正在杀死网络的可访问性。有一个这样做的可访问的方式。

检查出this article，我已经写了解释如何以可访问的方式删除边框。

这个想法简而言之就是当我们检测到键盘用户时只显示轮廓边框。一旦用户开始使用他的鼠标，我们禁用轮廓。因此，你可以获得最好的两个。

Answer 12

当然！您也可以从所有的HTML元素使用删除蓝色边框*

*{ 
    outline-color: transparent; 
    outline-style: none; 
    } 

而且

*{ 
    outline: none; 
    }