删除Safari / Chrome文本输入/ textarea发光


337

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


6
@Steve,禁用它的另一个原因是,如果您希望通过使用:focus而不是不良支持的轮廓样式在所有浏览器中都可以使用发光效果。
兰登

90
当人们就一个问题是技术性问题而开始就某事是否是“正确的事情”进行哲学对话时,这真是令人讨厌。
2013年

2
我正在制作一个在线电子表格,Steve,因此适合我的用法。这要看情况,但是如果它只是一个简单的表格,那么您应该将轮廓保持原样。
william44isme

4
我认为禁用它并使用CSS进行自定义:focus效果是完全可以的...
ithil 13/10/30

同样,知道如何禁用某些内容并不意味着它是不可逆的。为任何客户工作的任何人都知道,他们可能希望以一种方式查看呈现的内容,然后将其切换回原始/默认方式。向他们宣传无障碍性不会改变这种愿望或使任何人高兴。
JakeGould

Answers:


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

虽然,有人认为保留光晕/轮廓实际上对可访问性有益,因为它可以帮助用户查看当前聚焦于哪个Element。

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

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


2
太好了,非常感谢。还想知道,是否也可以删除textarea调整大小选项(在textarea的右下方)?
Alec Smart的

3
+1表示谨慎;尽量避免做任何会破坏用户对其平台性能的预期的事情;您实际上可能在损害他们的生产力,并使您的网站难以使用。
罗布2009年

6
自行删除chrome / safari textarea调整大小选项,后果自负!我发现它非常有用,即使在某些站点上也必不可少。
JeeBee

5
摆脱大小调整手柄:resize:none;
丹尼尔(Daniel)

22
box-shadow:无;
styks 2013年

92

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

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

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

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

举例来说<button>,这适用于元素,因为它们通常不会在焦点上发光,因为大多数情况下您都可以单击它。
kasimir

1
在OSX上的Chrome上,接受的答案对我不起作用。该解决方案完成了工作。
巴特2014年

同样使用此技术,您可以保持焦点,但是将轮廓的值重新定义为您选择的纯色等,以使其完全符合您的网站样式(如果完全删除不满意)。
尼尔·梦露

1
我没有工作,对铬的最新版本45.0.2454.101 m
J86

@ Carl-W的答案不容忽视!-当使用jQuery链接到一个div锚时,这很有用。我在div中重新加载了iframe,然后在不重新加载的情况下手动转到了锚点。它将向下滚动页面到锚点,但是整个div的外部呈蓝色。在div元素上添加了此CSS,它起作用了!-注意:我没有使用:focus选择器,只是将outline-coloroutline-style放在了div的CSS上。
韦德

13

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

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

resize: none;

(是的,我同意“尝试避免做任何会破坏用户期望的事情”,但有时确实是有道理的,即在Web应用程序的上下文中)

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

-webkit-appearance: none;

3
它也可以允许调整只在一个方向,这可能会解决一些布局的互动,而不完全禁用它:调整大小的可能值是nonebothhorizontalvertical,和inherit
Boann 2012年

我喜欢这里提供的解决方案'-webkit-appearance:none;' -从输入元素中删除所有样式,因此您可以根据需要对其进行样式设置。谢谢!
hanazair 2014年

我不知道为什么会有如此之多的投票,这根本不是问题的答案。
paddotk

7

卡尔·W

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

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

我将解释这一点:

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

5

我在一个div带有点击事件的上遇到了这种情况,经过20次搜索后,我发现该摘要节省了我的时间。

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

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


4

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

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

查看我写的这篇文章,以解释如何以一种易于访问的方式删除边框。

简而言之,想法是仅在我们检测到键盘用户时才显示轮廓边框。用户开始使用鼠标后,我们将禁用轮廓。结果,您可以充分利用两者的优势。


2

如果要删除Bootstrap中按钮的辉光(我认为这不一定是糟糕的UX),则需要以下代码:

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

谢谢。.btn:active:focus在实际上按住按钮的同时,必须去除发光。
homerjam

2

这个解决方案对我有用。

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

1

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

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

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

0

我发现删除“滑动门”类型的输入按钮上的轮廓很有帮助,因为轮廓没有覆盖滑动门图像的右侧“帽​​”,从而使聚焦状态显得有些奇怪。

input.slidingdoorbutton:focus { outline: none;}

0

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

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

    }

在Firefox和Chrome中进行了测试。


0

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

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

 *{
     outline: none;   
   }
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.