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

评论

@Steve，禁用此功能的另一个原因是，如果希望通过使用：focus而不是不良支持的轮廓样式在所有浏览器中都可以使用发光效果。
当人们就一个问题是技术性问题而开始就某事是否是“正确的事情”进行哲学对话时，这真的很烦人。
我正在制作一个在线电子表格，Steve，因此适合我的用法。这要视情况而定，但是如果它只是一个简单的表单，则应按原样保留大纲。
我认为禁用它并使用CSS进行自定义：focus效果是完全可以的...
另外，知道如何禁用某些功能并不意味着它是不可逆的。为任何客户工作的任何人都知道他们可能希望以一种方式查看呈现的内容，然后将其切换回原始/默认方式。在可访问性上吸引他们不会改变这种愿望或使任何人感到高兴。

#1 楼

编辑（11年后）：除非要提供备用来指示哪个元素处于活动状态，否则不要这样做。否则，这会损害可访问性，因为它实际上删除了指示文档中哪个元素具有焦点的指示。想象一下，作为一名键盘用户，并不真正了解您可以与之交互的元素。在这里让可访问性胜过美学。
 textarea, select, input, button { outline: none; }

尽管有人认为保留发光/轮廓实际上对可访问性有益可以帮助用户查看当前聚焦于哪个Element。
还可以使用伪元素'：focus'仅在用户选择了输入时定位输入。净/ JohnnyWalkerDesign / xm3zu0cf /

评论

太好了，非常感谢。还想知道，我是否也可以删除textarea调整大小选项（在textarea的右下角）？

– Alec Smart
09年6月1日于16:30
+1表示谨慎；请尽量避免做任何会破坏用户对其平台性能的预期的事情；您实际上可能在损害他们的生产力，并使您的网站难以使用。

–Rob
09年6月1日于16:31
自行删除chrome / safari textarea调整大小选项，后果自负！我发现它确实有用，即使在某些站点上也必不可少。

–JeeBee
09年6月1日于16:42
我没有删除调整大小选项，但认为以防万一:)

– Alec Smart
09年6月1日于16:45
摆脱调整大小的句柄：resize：none;

–丹尼尔（Daniel）
2012-2-15在16:09

#2 楼

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

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



更新：您可能不必使用:focus选择器。如果您有一个元素，请说<div id="mydiv">stuff</div>，并且在此div元素上获得了外部辉光，请像平常一样应用：

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


评论

例如，这适用于

#3 楼

在基于Webkit的浏览器中调整textarea大小时：

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

resize: none;


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

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

-webkit-appearance: none;


评论

也可能只允许在一个方向上调整大小，这可能会固定它与某些布局的交互而不会完全禁用它：resize的可能值是水平，垂直和继承都不是。

– Boann
2012年7月28日在6:34
我喜欢这里提供的'-webkit-appearance：none;'解决方案。 -从输入元素中删除所有样式，因此您可以根据需要对其进行样式设置。谢谢！

–hanazair
14-10-14在21:56
我不知道为什么会有这么多的投票，这根本不是问题的答案。

– Paddotk
17年9月14日在17:03

#4 楼

我在发生点击事件的div上遇到了这种情况，经过20次搜索后，发现该片段节省了我的时间。移动浏览器

#5 楼

Carl W：


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

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



我将对此进行解释： >
:focus表示它可以对焦点元素进行样式设置。因此，我们正在对焦点元素进行样式设置。

outline-color: transparent;表示蓝色发光是透明的。

outline-style: none;可以执行相同的操作。


#6 楼

这是为那些关心可访问性的人们提供的解决方案。

请不要使用outline:none;禁用焦点轮廓。如果执行此操作，则会杀死Web的可访问性。有一种可访问的方法。

请阅读我写的这篇文章，以解释如何以可访问的方式删除边框。仅当我们检测到键盘用户时才显示轮廓边框。用户开始使用鼠标后，我们将禁用轮廓。结果，您可以充分利用两者。

#7 楼

如果要删除Bootstrap中按钮的辉光（我认为这不一定是糟糕的UX），则需要以下代码：

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


评论

谢谢。 .btn：active：focus是移除发光的必要条件，同时实际上按住了按钮。

–homerjam
15年1月15日在17:03

#8 楼

此解决方案对我有用。

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


#9 楼

有时候，按钮也会在下面使用，以移除外线

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


#10 楼

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


#11 楼

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

input.slidingdoorbutton:focus { outline: none;}


#12 楼

我只需要从文本输入字段中删除此效果，就无法使其他技术正常工作，但这对我来说是有效的； 

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

    }


在Firefox和Chrome中进行了测试。

#13 楼

当然！您还可以使用* 

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


和

 *{
     outline: none;   
   }

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