Question

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

Answer 1

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

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

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

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

Answer 2

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

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

更新：您可能不必使用:focus选择器。如果你有一个元素，比如<div id="mydiv">stuff</div>，你就得到了这个div元素的外部光晕，就像正常那样应用：

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

Answer 3

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

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

resize: none;

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

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

-webkit-appearance: none;

Answer 4

Carl W：

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

我会解释一下：

:focus表示它调整焦点元素的样式。因此，我们将元素定型为焦点。
outline-color: transparent;表示蓝光是透明的。
outline-style: none;做同样的事情。

Answer 5

这是关心辅助功能的人的解决方案。

请不要使用outline:none;来禁用焦点大纲。如果您这样做，则会破坏Web的可访问性。有一种方法可以做到这一点。

查看我撰写的this article，以解释如何以易于访问的方式删除边框。

简而言之，我们只在检测键盘用户时显示轮廓边框。一旦用户开始使用他的鼠标，我们禁用大纲。因此，您将获得两者中的最佳效果。

Answer 6

我在-webkit-tap-highlight-color: rgba(0,0,0,0);上遇到过点击事件，经过20次搜索后，我发现这个片段可以节省我的一天。

http://jamesorr.com/test.php

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

Answer 7

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

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

Answer 8

有时候它会发生按钮，然后使用下面的方法删除外线

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

Answer 9

此解决方案对我有用。

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

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

Answer 11

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

input.slidingdoorbutton:focus { outline: none;}

Answer 12

我只需要从文本输入字段中删除此效果，而我无法让其他技巧正常工作，但这对我有用;

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

    }

在Firefox和Chrome中测试过。

Answer 13

当然！您也可以使用*

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

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

和

 *{
     outline: none;   
   }

删除Safari / Chrome textinput / textarea发光

13 个答案: