删除Safari/Chrome文本输入/文本区域外边框?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (10)
  • 关注 (0)
  • 查看 (96)

我在想,当我点击使用CSS的文本输入/文本区域时,是否有可能删除默认的蓝色和黄色外边框?

提问于
用户回答回答于
textarea, input, button { outline: none; }

不过,有人认为保持GLOG/大纲实际上对可访问性是有益的,因为它可以帮助用户了解当前关注的是哪些元素。

还可以使用伪元素。:focus仅当用户选择输入时,才以它们为目标。

用户回答回答于

有些时候,按钮也会出现,然后使用下面的按钮移除外线

input:hover
input:active, 
input:focus, 
textarea:active,
textarea:hover,
textarea:focus, 
button:focus,
button:active,
button:hover
{
    outline:0px !important;
}
用户回答回答于

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

input.slidingdoorbutton:focus { outline: none;}
用户回答回答于
<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>
用户回答回答于

我在一个div这是一个点击事件,经过20次搜索后,我发现了这个片段,它拯救了我的生活。

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

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

用户回答回答于

如果您想从Bootstrap中的按钮中删除外边框,那么您将需要以下代码:

.btn:focus, .btn:active:focus, .btn.active:focus{
  outline-color: transparent;
  outline-style: none;
}
用户回答回答于

简而言之,我们的想法是只在检测到键盘用户时显示轮廓边框。一旦用户开始使用鼠标,我们就禁用边框。结果,你得到了这两种方法中的优势。

用户回答回答于

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

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

我来解释一下:

  • :focus意味着它为焦点中的元素设置样式。所以我们正在设计聚焦元素。
  • outline-color: transparent;意味着蓝色的辉光是透明的。
  • outline-style: none;做同样的事。
用户回答回答于

在基于Webkit的浏览器中调整文本区域大小:

设置TextArea上的最大高度和最大宽度不会移除视觉调整大小的句柄.。试着:

resize: none;

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

-webkit-appearance: none;
用户回答回答于

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

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

您可能不必使用:focus选择器。如果你有元素,比如说<div id="mydiv">stuff</div>,在div元素上得到外部发光,就像正常的一样:

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

所属标签

可能回答问题的人

  • HKC

    红客学院 · 创始人 (已认证)

    26 粉丝7 提问5 回答
  • Dingda

    Dingda · 站长 (已认证)

    4 粉丝0 提问3 回答
  • 西风

    renzha.net · 站长 (已认证)

    9 粉丝1 提问3 回答
  • 螃蟹居

    1 粉丝0 提问2 回答

扫码关注云+社区

领取腾讯云代金券