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

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

#1楼

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

#2楼

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

input.slidingdoorbutton:focus { outline: none;}

#3楼

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

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

#4楼

卡尔·W ：

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

我将解释这一点：

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

#5楼

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

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

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3191989

标签

Bootstrap

safari

Chrome