Question

我已经创建了一个提交按钮，但每次点击它时，边框都会消失，角落会变得模糊。但是当你在提交按钮外面点击时，外观会恢复正常。我不确定为什么。我只是想要它，以便我的按钮在整个点击过程中看起来都一样。这是我的代码：

<input class="Submit" type="submit" value="Send"/>

.Submit {
    background-color:#2b6ba1;
    color:white;
    position:relative;
    height:30px;
    width:80px;
    border-radius:5px;
    border:1px solid #1b4898;
    box-shadow:0px 1px 2px black;
}

.Submit:hover {
    background-color:#2276bd;
}

.Submit:active {
    background-color:#185589;
    top:1px;
}

这是jsfiddle链接：http://jsfiddle.net/z1ounhkm/

如果有人能帮助我，我将不胜感激，谢谢

Answer 1

尝试在你的css上添加：

.Submit:focus {outline:0;}

这里是小提琴：http://jsfiddle.net/z1ounhkm/6/

Answer 2

这是因为当你专注于按钮时，在chrome中，默认情况下它将需要

:focus {
  outline: -webkit-focus-ring-color auto 5px;
}

所以，只需将它设为0即可解决您的问题。

    .Submit:focus{
    outline:0;
}

单击它时，为什么我的按钮看起来不一样？

2 个答案: