删除 Safari/Chrome 文本输入/文本区域发光答案

【问题标题】：Remove Safari/Chrome textinput/textarea glow删除 Safari/Chrome 文本输入/文本区域发光
【发布时间】：2010-10-30 10:49:19
【问题描述】：

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

【问题讨论】：

@Steve，禁用它的另一个原因是，如果您希望通过使用 :focus 而不是支持不良的轮廓样式来在所有浏览器中使用发光效果。
当问题是技术问题时，当人们开始就某事是否“正确的事情”展开哲学对话时，这真的很烦人。
我正在制作一个在线电子表格，史蒂夫，所以它适合我的使用。这取决于，但如果它只是一个简单的形式，那么你应该保持原样。
我认为禁用它并使用 css 制作自定义 :focus 效果是完全可以的...
另外，知道如何禁用某些东西并不意味着它是不可逆转的。为任何客户工作的任何人都知道，他们可能希望看到以一种方式呈现的东西，然后将其切换回原始/默认方式。向他们讲授可访问性不会改变这种愿望或让任何人开心。

标签： css cross-browser

【解决方案1】：

编辑（11 年后）：不要这样做，除非您要提供后备以指示哪个元素处于活动状态。否则，这会损害可访问性，因为它实质上会删除显示文档中哪个元素具有焦点的指示。想象一下，作为一个键盘用户，并不真正知道可以与什么元素进行交互。在这里让可访问性胜过美学。

textarea, select, input, button { outline: none; }

尽管有人认为保持发光/轮廓实际上有利于可访问性，因为它可以帮助用户查看当前关注的元素。

您还可以使用伪元素 ':focus' 仅在用户选择输入时定位输入。

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

【讨论】：

完美，非常感谢。还想知道，我是否也可以删除 textarea resize 选项（在 textarea 的右下角）？
+1 表示谨慎；请尽量避免做任何破坏用户对其平台性能预期的事情；您实际上可能会损害他们的工作效率并使您的网站更难使用。
删除我的 chrome/safari textarea 调整大小选项，后果自负！我发现它非常有用，即使在某些网站上也是必不可少的。
我没有删除调整大小选项，但认为以防万一：)
用于摆脱调整大小句柄：resize: none;

【解决方案2】：

关于在基于 webkit 的浏览器中调整文本区域大小：

在 textarea 上设置 max-height 和 max-width 不会删除视觉调整大小句柄。试试：

resize: none;

（是的，我同意“尽量避免做任何破坏用户期望的事情”，但有时它确实有意义，即在 Web 应用程序的上下文中）

从头开始自定义 webkit 表单元素的外观：

-webkit-appearance: none;

【讨论】：

也可以只允许在一个方向上调整大小，这可以修复它与某些布局的交互而不完全禁用它：调整大小的可能值为none、both、horizontal、 vertical 和 inherit。
我喜欢这里提供的解决方案 '-webkit-appearance: none;' - 从输入元素中删除所有样式，因此您可以根据需要设置它们的样式。谢谢！
我不知道为什么会有这么多赞成票，这根本不是问题的答案。

【解决方案3】：

这种效果也可能发生在非输入元素上。我发现以下是更通用的解决方案

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

更新：您可能不必使用:focus 选择器。如果你有一个元素，比如<div id="mydiv">stuff</div>，并且你在这个 div 元素上得到了外发光，就照常应用：

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

【讨论】：

这适用于例如<button> 元素，它们不会特别受益于聚焦发光，因为大多数情况下您都在点击它。
接受的答案在 OSX 上的 Chrome 上对我不起作用。这个解决方案完成了这项工作。
同样使用此技术，您可以保持焦点，但如果完全删除轮廓不完全令人满意，则将轮廓的值重新定义为您选择的纯色等以适合您的网站风格.
在最新版本的 chrome 上对我不起作用45.0.2454.101 m
这个来自@Carl-W 的回答不容忽视！ - 这在使用 jQuery 链接到一个 div 的锚点时很有用。我在 div 中重新加载 iframe，然后手动转到锚点而不重新加载。它会将页面向下滚动到锚点，但整个 div 有蓝色的外发光。在 div 元素上添加了这个 CSS，它起作用了！ -- 注意：我没有使用:focus 作为选择器，我只是将outline-color 和outline-style 放在我的div 的css 上。

【解决方案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>

【讨论】：

【解决方案5】：

我发现删除“滑动门”类型的输入按钮上的轮廓很有帮助，因为轮廓没有覆盖滑动门图像的右侧“帽”，使焦点状态看起来有点不稳定。

input.slidingdoorbutton:focus { outline: none;}

【讨论】：

【解决方案6】：

如果您想从 Bootstrap 中的按钮中移除发光（我认为这不一定是糟糕的用户体验），您需要以下代码：

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

【讨论】：

谢谢。 .btn:active:focus 是在实际按住按钮时移除发光所必需的。

【解决方案7】：

Carl W:

这种效果也可能发生在非输入元素上。我发现以下是更通用的解决方案
:focus {
  outline-color: transparent;
  outline-style: none;
}

我来解释一下：

:focus 表示它为焦点元素设置样式。因此，我们正在对焦点元素进行样式设置。
outline-color: transparent; 表示蓝光是透明的。
outline-style: none; 做同样的事情。

【讨论】：

【解决方案8】：

有时也会发生按钮，然后使用下面的按钮删除外线

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

【讨论】：

【解决方案9】：

我只需要从我的文本输入字段中删除这种效果，我无法让其他技术完全正常工作，但这对我有用；

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

    }

在 Firefox 和 Chrome 中测试。

【讨论】：

【解决方案10】：

我在一个有点击事件的div 上遇到了这种情况，经过 20 次搜索后，我发现这个 sn-p 拯救了我的一天。

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

这会禁用 webkit 移动浏览器中的默认按钮突出显示

【讨论】：

【解决方案11】：

这是关心可访问性的人的解决方案。

请不要使用outline:none; 来禁用焦点轮廓。如果你这样做，你正在扼杀网络的可访问性。有一种可行的方法来做到这一点。

查看我写的this article，它解释了如何以一种可访问的方式移除边框。

简而言之，当我们检测到键盘用户时，只显示轮廓边框。一旦用户开始使用他的鼠标，我们就会禁用轮廓。因此，您将获得两者中最好的。

【讨论】：

【解决方案12】：

当然！您也可以使用 *

从所有 HTML 元素中删除蓝色边框

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

和

 *{
     outline: none;   
   }

【讨论】：

【解决方案13】：

这个解决方案对我有用。

input:focus {
    outline: none !important;
    box-shadow: none !important;
}

【讨论】：