如何删除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

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

试试

.resetButton{ outline: none; }

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

另请查看这篇关于完全移除边框的危险的帖子Google Chrome > 文本框 > 活动时黄色边框..？

Answer 4

查看大纲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; }