删除Safari和Chrome textinput / textarea发光

I am wondering if its possible to remove the default blue and yellow glow when I click on a text input / text area using CSS?

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

12 个解决方案

#1

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

Although, it's been argued that keeping the glow/outline is actually beneficial for accessibility as it can help users see which Element is currently focused.

尽管，一直以来人们都认为保持glow/outline实际上有利于易访问性，因为它可以帮助用户查看当前关注的元素。

You can also use the pseudo-element ':focus' to only target the inputs when the user has them selected.

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

Demo: https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/

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

#2

This effect can occur on non-input elements, too. I've found the following works as a more general solution

这种影响也可能发生在非输入元素上。我发现以下方法可以作为一个更一般的解决方案

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

---

Update: You may not have to use the :focus selector. If you have an element, say <div id="mydiv">stuff</div>, and you were getting the outer glow on this div element, just apply like normal:

更新:您可能不需要使用:focus选择器。如果你有一个元素，比方说

元素

，你得到了这个div元素的外发光，就像普通的一样:

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

#3

On textarea resizing in webkit based browsers:

在基于webkit的浏览器中修改文本区域大小:

Setting max-height and max-width on the textarea will not remove the visual resize handle. Try:

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

resize: none;

(and yes I agree with "try to avoid doing anything which breaks the user's expectation", but sometimes it does make sense, i.e. in the context of a web application)

(是的，我同意“尽量避免做任何违背用户期望的事情”，但有时它确实有意义，例如在web应用程序的上下文中)

To customize the look and feel of webkit form elements from scratch:

自定义webkit表单元素的外观和感觉:

-webkit-appearance: none;

#4

Carl W:

Carl W:

This effect can occur on non-input elements, too. I've found the following works as a more general solution

这种影响也可能发生在非输入元素上。我发现以下方法可以作为一个更一般的解决方案

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

:专注{边框色:透明;outline-style:没有;}

I'll explain this:

我将解释:

• :focus means it styles the elements that are in focus. So we are styling the elements in focus.
• :focus表示对焦点的元素进行样式化。所以我们在焦点中设计元素的样式。
• outline-color: transparent; means that the blue glow is transparent.
• 边框色:透明;意味着蓝光是透明的。
• outline-style: none; does the same thing.
• outline-style:没有;做同样的事。

#5

This is the solution for people that do care about accessibility.

这对于关心可访问性的人来说是一个解决方案。

Please, don't use outline:none; for disabling the focus outline. You are killing accessibility of the web if you do this. There is a accessible way of doing this.

请不要使用大纲:没有;禁用焦点轮廓。如果你这样做，你就会扼杀网页的可访问性。有一种方法可以做到这一点。

Check out this article that I've written to explain how to remove the border in an accessible way.

请阅读我为解释如何以一种可访问的方式删除边界而编写的这篇文章。

The idea in short is to only show the outline border when we detect a keyboard user. Once a user starts using his mouse we disable the outline. As a result you get the best of the two.

简而言之，当我们检测到键盘用户时，只显示轮廓边框。一旦用户开始使用他的鼠标，我们就禁用了大纲。结果你得到了这两者中最好的。

#6

If you want to remove the glow from buttons in Bootstrap (which is not necessarily bad UX in my opinion), you'll need the following code:

如果您想从引导程序中的按钮上移除辉光(在我看来这并不一定是坏的UX)，您需要以下代码:

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

#7

I experienced this on a div that had a click event and after 20 some searches I found this snippet that saved my day.

我在一个有单击事件的div中体验到了这一点，在20次搜索之后，我找到了这个片段，它挽救了我的一天。

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

This disables the default button highlighting in webkit mobile browsers

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

#8

some times it's happens buttons also then use below to remove the outerline

有时它的“碰巧”按钮也会使用下面的按钮来删除外部线

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

#9

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

#10

I found it helpful to remove the outline on a "sliding door" type of input button, because the outline doesn't cover the right "cap" of the sliding door image making the focus state look a little wonky.

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

input.slidingdoorbutton:focus { outline: none;}

#11

I just needed to remove this effect from my text input fields, and I couldn't get the other techniques to work quite right, but this is what works for me;

我只需要从我的文本输入字段中删除这个效果，我不能让其他的技术工作得很好，但是这对我来说是可行的;

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

    }

Tested in Firefox and in Chrome.

在Firefox和Chrome中测试过。

#12

Sure! You can remove blue border also from all HTML elements using *

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

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

And

和

 *{
     outline: none;   
   }