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

小编典典

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

all

我正在处理一个网页，我想要自定义样式的<button>标签。所以对于 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;
}

阅读 159

2022-02-28

共1个答案

小编典典

不建议 这样做，因为它会降低您网站的可访问性；

也就是说，如果你坚持，这个 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>

2022-02-28