8

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

8 回答 8

13

用这个：

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

要不就

input:focus{
    outline: none;   
}

如果您不希望所有输入类型都使用该大纲。

于 2013-10-18T10:28:23.627 回答
4

只需添加display: block;

.resetButton
{
    margin: 0px;
    background:url(../images/button/Reset2.png) no-repeat;
    display: block;
    border: none; 
    width: 90px;
    height: 32px;
    cursor: pointer;
}
于 2013-10-18T10:24:06.787 回答
1

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

尝试

.resetButton{ outline: none; }

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

另请查看这篇文章，了解完全移除边框的危险 Google Chrome > 文本框 > 活动时的黄色边框..？

于 2013-10-18T10:24:21.977 回答
0

看一下大纲CSS 属性。

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

于 2013-10-18T10:21:53.403 回答
0

添加一个outline: none到你的CSS：

.resetButton
{
    margin: 0px;
    background:url(../images/button/Reset2.png) no-repeat;
    border: none; 
    width: 90px;
    height: 32px;
    cursor: pointer;
    outline: none;
}
于 2013-10-18T10:22:42.427 回答
0

尝试这个。

.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;
}
于 2013-10-18T10:25:19.967 回答
0

也可以box-shadow。尝试类似：

.resetButton{ box-shadow: none; }

或者

resetButton:focus{ box-shadow: none; }
于 2021-01-23T16:53:49.330 回答
0

只需将其添加到您的 CSS 中：

.resetButton:focus {
    outline: none;
}
于 2017-09-10T19:42:39.327 回答