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

我在一个网页上工作，我想自定义样式的<按钮>标签。在CSS中，我说:border: none。现在它在safari中工作得很好，但在chrome中，当我点击其中一个按钮时，它会在它周围放上一个烦人的蓝色边框。我认为button:active {outline:none}或button:focus {outline:none}将工作，但两者都没有。什么好主意吗?

这是它在被点击之前的样子(以及我希望它在被点击之后的样子):

这就是我所说的边界:

这是我的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;
}

当前回答

我只是通过选择所有并应用outline:none到所有内容来删除页面中的所有标签的大纲:)

*:focus {outline:none}

正如bagofcole提到的，你可能还需要添加!important，所以样式看起来是这样的:

*:focus {outline:none !important}

2016-01-06 14:49:09

其他回答

我只是通过选择所有并应用outline:none到所有内容来删除页面中的所有标签的大纲:)

*:focus {outline:none}

正如bagofcole提到的，你可能还需要添加!important，所以样式看起来是这样的:

*:focus {outline:none !important}

2016-01-06 14:49:09

不建议这样做，因为这会降低网站的可访问性;更多信息，请看这篇文章。

也就是说，如果你坚持，这个CSS应该工作:

button:focus {outline:0;}

查看它或JSFiddle: http://jsfiddle.net/u4pXu/

或者在这个片段中:

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>

2014-02-13 15:15:15

对于任何使用Bootstrap并有此问题的人来说，他们使用:active:focus以及仅仅:active和:focus，所以你需要:

element:active:focus {
    outline: 0;
}

希望能节省一些人的时间来解决这个问题，我敲了敲我的头，想知道为什么这么简单的事情不能工作。

2017-08-25 09:35:54

对于这个问题:

用这个:

   *{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

结果:

2017-02-25 10:56:17

解决可访问性问题的另一种方法是通过一点Javascript。感谢来自hackernoon的这篇深刻的博客文章:https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

这里的方法非常简单而有效:当人们开始使用tab键导航页面时添加一个类(当再次切换到鼠标时可选地删除它)。然后，您可以使用这个类来显示或不显示焦点轮廓。

function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);

2019-02-13 08:52:33

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

推荐文章

最新文章

标签