聚焦时如何从单选框中删除蓝色轮廓？答案

【问题标题】：How do i remove the blue outline from a radio box when focused?聚焦时如何从单选框中删除蓝色轮廓？
【发布时间】：2016-08-04 23:53:03
【问题描述】：

我想删除当我的收音机被点击/聚焦时它给我的蓝色轮廓。我尝试使用outline: none 和border: none，但似乎没有任何效果。有人对此有解决方案吗？

我在说什么的屏幕截图：

【问题讨论】：

您在哪里看到蓝色轮廓？你说的是谷歌浏览器吗？
是的，在谷歌浏览器中，每当我点击单选复选框时，它都会给我一个方形的蓝色轮廓，我想摆脱它！
可能重复：stackoverflow.com/questions/20593224/…
你能告诉我们你的 CSS 和你引用它的 HTML 吗？标记的副本有 outline: none 作为解决方案，您已经声明您已经尝试过。

标签： html css checkbox radio

【解决方案1】：

当输入元素有焦点时移除轮廓。

input:focus{
  outline:none;
}

附带说明，这仅适用于 Google Chrome，其他浏览器使用不同的技术来显示具有焦点的输入元素。

【讨论】：

感谢您的遮阳篷，我已经尝试过了，但不知何故无法正常工作。
@The301 请创建一个基本演示，以便我们对其进行检查。你可以在 jsFiddle 上创建一个
提供了一个截图，我很确定你们现在知道我的意思了。
在此之前我们知道您的意思，但如果列出的解决方案不起作用，我们需要代码。

【解决方案2】：

更新：

最近在可访问性方面做了很多工作，我开始明白从输入中删除轮廓并不是一件好事。它可以防止人们使用键盘导航来查看重点。

组织发帖：

您可能必须更具体地使用您的选择器。使用引导程序时，您必须通过选择 input[type="radio"]:focus 来覆盖它（在我的版本中，至少是 3.3.6），而不仅仅是 input:focus，如下所示：

input[type="radio"]:focus {
    outline: none;
}

【讨论】：

【解决方案3】：

也许是一个单独的问题，但我也必须将 box-shadow 设置为 none。

input[type="checkbox"] {
    outline: none;
    box-shadow: none;
}

【讨论】：

【解决方案4】：

我知道这是旧的，但希望它可以帮助别人！

input[type='radio']:focus {
    outline: none !important;
    box-shadow: none !important;
}
/*For Bootstrap*/
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none !important;
}

【讨论】：

【解决方案5】：

试试这个：

input[type=radio] {
    outline-color: transparent; 
}

希望对你有帮助！

【讨论】：