Question

我创建了这个HTML按钮，在使用CSS设置样式后，每次点击它时，周围都会出现蓝色选区边框。有没有什么办法解决这一问题？我知道默认的未更改元素在我创建它时不会这样做，因此我认为它必须与我添加的CSS有关。

HTML：

<button type="button" class="drop-button" >-</button>

CSS：

.drop-button {
    background-color: #343436;
    color: #FFFFFF;
    border: none;
    border-radius: 5px;
    margin-right: 8px;
    margin-left: 4px;
    height: 20px;
    width: 25px;
    font-size: 20px;
    vertical-align: middle;
    line-height: 0px;
}

Here is a link to it. http://jsfiddle.net/xytxnpyt/

Answer 1

这是Chrome的默认行为。你可以用这个来关掉它......

button:focus{
outline: none;
}

Answer 2

你走了：

.drop-button:focus {
    outline: 0;
}

Fiddle

Answer 3

虽然我无法重现您在JSFiddle中讨论的蓝色选区边框，但请尝试添加“outline-width：0px;”按钮的CSS，看看是否有任何作用

当我点击我的HTML按钮时，一个蓝色的选择＆＃34;边框显示

3 个答案: