从 Chrome 中的 css 自定义样式按钮中删除蓝色边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20340138/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove blue border from css custom-styled button in Chrome
提问by eshellborn
I'm working on a web page, and I want custom-styled <button>tags. So with CSS, I said: border: none. Now it works perfectly in safari, but in chrome, when I click one of the buttons, it puts an annoying blue border around it. I thought button:active { outline: none }or button:focus { outline:none }would work, but neither do. Any ideas?
我正在处理一个网页，我想要自定义样式的<button>标签。所以对于 CSS，我说：border: none. 现在它在 safari 中完美运行，但在 chrome 中，当我单击其中一个按钮时，它会在它周围放置一个恼人的蓝色边框。我想button:active { outline: none }或button:focus { outline:none }会工作，但都没有。有任何想法吗？
This is what it looks like before being clicked (and how I want it to still look after being clicked):
这是被点击之前的样子（以及我希望它在被点击后的样子）：
And this is the border I'm talking about:
这就是我所说的边界：
Here is my CSS:
这是我的 CSS：
button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}
button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}
button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}
button.change:hover {
cursor: pointer;
background-color: #F89900;
}
button:active {
outline: none;
border: none;
}
回答by Ronen Cypis
Doing this is not recommendedas it regresses the accessibilityof your site; for more info, see this post.
不建议这样做，因为它会降低您网站的可访问性；有关更多信息，请参阅此帖子。
That said, if you insist, this CSS should work:
也就是说，如果你坚持，这个 CSS 应该可以工作：
button:focus {outline:0;}
Check it out or JSFiddle: http://jsfiddle.net/u4pXu/
检查出来或 JSFiddle：http: //jsfiddle.net/u4pXu/
Or in this snippet:
或者在这个片段中：
button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}
button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}
button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}
button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}
button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}
button.change:hover {
cursor: pointer;
background-color: #F89900;
}
button:active {
outline: none;
border: none;
}
button:focus {outline:0;}<button class="launch">Launch with these ads</button>
<button class="change">Change</button>回答by Nathan
Wait! There's a reason for that ugly outline!
等待！那个丑陋的轮廓是有原因的！
Before removing that ugly blue outline, you may want to take accessibilityinto consideration. By default, that blue outline is placed on focusable elements. This is so that users with accessibility issues are able to focus that button by tabbing to it. Some users do not have the motor skills to use a mouse and must use only the keyboard (or some other input device) for computer interaction. When you remove the blue outline, there is no longer a visual indicator on what element is focused. If you are going to remove the blue outline, you shouldreplace it with another type of visual indication that the button is focused.
在删除那个丑陋的蓝色轮廓之前，您可能需要考虑可访问性。默认情况下，该蓝色轮廓放置在可聚焦元素上。这样一来，有可访问性问题的用户就可以通过按 Tab 键来聚焦该按钮。一些用户不具备使用鼠标的运动技能，必须仅使用键盘（或某些其他输入设备）进行计算机交互。当您移除蓝色轮廓时，不再有关于焦点元素的视觉指示器。如果要删除蓝色轮廓，则应将其替换为其他类型的按钮已聚焦的视觉指示。
Possible Solution: Darken Buttons when focused
可能的解决方案：聚焦时使按钮变暗
For the examples below, Chrome's blue outline was first removed by using button:focus { outline:0 !important; }
对于下面的示例，Chrome 的蓝色轮廓首先通过使用 button:focus { outline:0 !important; }
Here are your basic Bootstrap buttons as they appear normally:
以下是正常显示的基本 Bootstrap 按钮：
Here are the buttons when they receive focus:
以下是获得焦点时的按钮：
Here the buttons when they are pressed:
这里的按钮按下时：
As you can see, the buttons are a little darker when they receive focus. Personally, I would recommend making the focused buttons even darker so that there is a very noticeable difference between the focused state and the normal state of the button.
如您所见，按钮在获得焦点时会变暗一些。就个人而言，我建议让聚焦按钮更暗，以便按钮的聚焦状态和正常状态之间存在非常明显的差异。
It's not just for disabled users
它不仅适用于残疾用户
Making your site more accessible is something that is often overlooked but can help create a more productive experience in your website. There are many normal users that use keyboard commands to navigate through websites in order to keep hands on the keyboard.
使您的网站更易于访问是经常被忽视的事情，但可以帮助在您的网站中创建更高效的体验。有许多普通用户使用键盘命令来浏览网站，以便将手放在键盘上。
回答by Mike
I just remove the outline from all the tags in the page by selecting all and applying outline:none to everything:)
我只是通过选择所有内容并将大纲：无应用于所有内容来从页面中的所有标签中删除大纲:)
*:focus {outline:none}
As bagofcole mentioned, you might need to add !important as well, so the style will look like this:
正如 bagofcole 提到的，您可能还需要添加 !important，因此样式将如下所示：
*:focus {outline:none !important}
回答by antonkronaj
In my instance of this problem I had to specify box-shadow: none
在这个问题的例子中，我必须指定 box-shadow: none
button:focus {
outline:none;
box-shadow: none;
}
回答by Scabbia
Don't forget the !importantdeclaration, for a better result
不要忘记!important声明，为了更好的结果
button:focus {outline:0 !important;}
A rule that has the !important property will always be applied no matter where that rule appears in the CSS document.
无论该规则出现在 CSS 文档的何处，都将始终应用具有 !important 属性的规则。
回答by Aaron Noel De Leon
Removing outlineis terrible for accessibility! Ideally, the focus ring shows up only when the user intends to use the keyboard.
删除outline对于可访问性来说很糟糕！理想情况下，对焦环仅在用户打算使用键盘时出现。
Use :focus-visible. It's currently a W3C proposal for styling keyboard-only focus using CSS, and is supported in Firefox (caniuse). Until other major browsers support it, you can use this robust polyfill.
使用:focus-visible。它目前是 W3C 的提案，用于使用 CSS 为仅键盘焦点设置样式，并在 Firefox ( caniuse) 中得到支持。在其他主流浏览器支持之前，您可以使用这个强大的polyfill。
/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
outline: none;
}
/* Optional: Customize .focus-visible */
.focus-visible {
outline-color: lightgreen;
}
I also wrote a more detailed postjust in case you need more info.
我还写了一篇更详细的帖子，以防您需要更多信息。
回答by Roo
Add this in your CSS file.
将此添加到您的 CSS 文件中。
*{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
回答by chuk
Use either this:
使用这个：
:active {
outline:none;
}
or this if that doesn't work:
或者如果这不起作用：
:active {
outline:none !important;
}
This works for me (FF and Chrome, at least). Instead of targeting the :focusstate, just target the :activestate and that will remove the aesthetically obtrusive highlighting in your browser when a user clicks a link. But it will still retain the focus states when a user with disabilities tabs or shift-tabs through a page. Both parties are happy. :)
这对我有用（至少 FF 和 Chrome）。而不是针对:focus状态，只需针对:active状态，当用户单击链接时，这将消除浏览器中美观的突出显示。但是当有残疾的用户在页面中切换标签或切换标签时，它仍然会保留焦点状态。双方都很高兴。:)
回答by Behnam Mohammadi
for this problem:
对于这个问题：
use this:
用这个：
*{
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids */
}
result:
结果：
回答by Forever Nomad
For anyone using Bootstrap and having this problem, they use :active:focus as well as just :active and :focus so you'll need:
对于使用 Bootstrap 并遇到此问题的任何人，他们使用 :active:focus 以及 :active 和 :focus 所以你需要：
element:active:focus {
outline: 0;
}
Hopefully saved someone some time figuring that one out, banged my head for bit wondering why such a simple thing wasn't working.
希望能节省一些时间来解决这个问题，让我有点想知道为什么这么简单的事情不起作用。
