如何删除html按钮的轮廓

Question

我的html页面上有按钮，当我点击该按钮时，它会显示外线到按钮，如下图所示。

在这里，当我点击重置按钮时，它显示我在上面的图像。

Html代码：

< input type="reset" value="" class="resetButton" />

css代码：

.resetButton
{
    margin: 0px;
    background:url(../images/button/Reset2.png) no-repeat;
    border: none; 
    width: 90px;
    height: 32px;
    cursor: pointer;
}

Answer 1

使用此：

input[type="reset"]:focus{
    outline: none;   
}

或只是

input:focus{
    outline: none;   
}

如果您不希望所有输入类型的轮廓。

Answer 2

只需添加display: block;

即可

.resetButton
{
    margin: 0px;
    background:url(../images/button/Reset2.png) no-repeat;
    display: block;
    border: none; 
    width: 90px;
    height: 32px;
    cursor: pointer;
}

Answer 3

这通常是一个镀铬问题，这里要注意的主要是它是一个轮廓而不是边框​​。

尝试

.resetButton{ outline: none; }

有关详细信息，请查看http://www.w3.org/TR/CSS2/ui.html#dynamic-outlines

另请查看这篇文章，了解完全移除边框的危险 Google Chrome > Textboxes > Yellow border when active..?

Answer 4

查看outline CSS属性。

要设置单击按钮的样式，可以使用:active伪类。

Answer 5

在您的css中添加outline: none：

.resetButton
{
    margin: 0px;
    background:url(../images/button/Reset2.png) no-repeat;
    border: none; 
    width: 90px;
    height: 32px;
    cursor: pointer;
    outline: none;
}

Answer 6

试试这个。

.resetButton, .resetButton:visited
{
    margin: 0px;
    background:url(../images/button/Reset2.png) no-repeat;
    display: block;

    width: 90px;
    height: 32px;
    cursor: pointer;
    border: none;
    outline: none;
}

Answer 7

只需将其添加到您的CSS：

.resetButton:focus {
    outline: none;
}

Answer 8

也可能是 box-shadow。尝试类似：

.resetButton{ box-shadow: none; }

或

resetButton:focus{ box-shadow: none; }