从Chrome中的css自定义样式按钮中删除蓝色边框

本文翻译自：Remove blue border from css custom-styled button in Chrome

I'm working on a web page, and I want custom-styled <button> tags. 我正在开发一个网页，我想要自定义样式的<button>标签。 So with CSS, I said: border: none . 所以用CSS，我说： 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. 现在它在safari中完美运行，但在chrome中，当我点击其中一个按钮时，它会在它周围放置一个恼人的蓝色边框。 I thought button:active { outline: none } or button:focus { outline:none } would work, but neither do. 我认为button:active { outline: none }或button:focus { outline:none }会起作用，但两者都不起作用。 Any ideas? 有任何想法吗？

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

---

#1楼

参考：https://stackoom.com/question/1NLOk/从Chrome中的css自定义样式按钮中删除蓝色边框

---

#2楼

Just add this to your css: 只需将此添加到您的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> 

---

#3楼

Don't forget the !important declaration, 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属性的规则。

---

#4楼

Wait! 等待！ There's a reason for that ugly outline! 这个丑陋的轮廓有一个原因！

Before removing that ugly blue outline, you may want to take accessibility into 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. 这样，具有辅助功能问题的用户可以通过Tab键对其进行关注。 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 should replace it with another type of visual indication that the button is focused. 如果要删除蓝色轮廓， 则应将其替换为按钮聚焦的其他类型的可视指示。

Possible Solution: Darken Buttons when focused 可能的解决方案：聚焦时使按钮变暗

For the examples below, Chrome's blue outline was first removed by using button:focus { outline:0 !important; } 对于下面的示例，首先使用button:focus { outline:0 !important; }删除Chrome的蓝色轮廓button:focus { outline:0 !important; } 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. 有许多普通用户使用键盘命令来浏览网站以便将手放在键盘上。

---

#5楼

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). 这对我有用（至少FF和Chrome）。 Instead of targeting the :focus state, just target the :active state and that will remove the aesthetically obtrusive highlighting in your browser when a user clicks a link. 而不是定位:focus状态，只需定位:active状态，这将在用户单击链接时删除浏览器中美观突兀的突出显示。 But it will still retain the focus states when a user with disabilities tabs or shift-tabs through a page. 但是当有残障的用户选项卡或通过页面切换标签时，它仍将保留焦点状态。 Both parties are happy. 双方都很开心。 :) :)

---

#6楼

Add this in your CSS file. 在CSS文件中添加它。

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}