如何在聚焦时从单选框中移除蓝色轮廓？

Question

当我的单选按钮被点击/聚焦时，我希望能够去除蓝色轮廓线。 我尝试使用 outline: none 和 border: none，但都没有起作用。 有人有解决方案吗？

下面是我所说的截图:

- The301

---

你在哪里看到蓝色轮廓？你是在说Google Chrome吗？ - Aziz

是的，在谷歌浏览器中，每当我点击单选框时，它会在周围显示一个蓝色方框，我想要去掉它！ - The301

可能是重复问题：https://dev59.com/aWIj5IYBdhLWcg3wIx7W - KhoPhi

你能展示一下你的CSS和引用它的HTML吗？被标记为重复的问题中提到了outline: none作为解决方案，而你已经声明过尝试过了。 - GHC

Answer 1

当输入元素获得焦点时，请取消其外边框。

input:focus{
  outline:none;
}

值得一提的是，这仅适用于Google Chrome浏览器，其他浏览器对于显示输入元素是否获得焦点使用不同技术。

- Wowsk

---

谢谢您的回答，我已经尝试过了，但不知道为什么它并没有起作用。 - The301

@The301请创建一个基本演示，以便我们进行检查。您可以在jsFiddle上创建一个。 - Aziz

提供了一张截图，我相信你们现在知道我的意思了。 - The301

我们知道你之前的意思，但如果列出的解决方案不起作用，我们需要代码。 - Wowsk

Answer 2

更新：

最近我在与无障碍性的工作中有很多经验，我意识到从输入框中删除轮廓线并不是一件好事。这会防止使用键盘导航的人看到焦点所在位置。

---

原始帖子：

你可能需要更具体的选择器。当使用 bootstrap 时，您必须通过选择 input[type="radio"]:focus 来覆盖它（至少在我的版本 3.3.6 中），而不仅仅是 input:focus，就像这样：

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

- Bill

Answer 3

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

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

- TWilly

Answer 4

试试这个

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

- Kasetiya Yash

---

你的回答可以通过添加更多支持信息来改进。请[编辑]以添加进一步的细节，例如引用或文献，以便他人可以确认你的答案是否正确。你可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

Answer 5

我知道这是老话题，但希望它能帮助到某些人！

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

- Sridhar Nathani

Answer 6

试试这个：

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

希望能对你有所帮助！

- Leandro Soriano

---

box-shadow: none - Abhishek Goswami