html - 按钮上出现灰色轮廓，不确定原因

Question

出于某种原因，我所有的按钮都有一个灰色轮廓，我完全不确定它的来源。它不是悬停或事件的东西，它是一种始终存在的东西。我还注意到浏览器添加到按钮的不是点击边框，因为我已经用 :focus 值删除了它。

这是在谷歌浏览器中。我不确定其他浏览器是否存在此问题。

.button_default {
    display: inline-block;
    background: #1188f0;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e8cff), color-stop(100%,#1188f0));
    background: -moz-linear-gradient(center top, #2e8cff 0%, #1188f0 100%);
    -webkit-box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
    -moz-box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
    box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: background-color 0.2s linear;
    -moz-transition: background-color 0.2s linear;
    -o-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
    text-shadow: 0px 1px 0px #006ac7;
    padding: 5px 15px;
    text-transform: uppercase;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
}
.button_default:hover {
    background: #1995fa;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e8cff), color-stop(100%,#2e8cff));
    background: -moz-linear-gradient(center top, #2e8cff 0%, #2e8cff 100%);
}
.button_default:active {
	cursor: wait;
    -webkit-box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
    -moz-box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
    box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
    -webkit-transition: background-position 0.3s linear;
    -moz-transition: background-position 0.3s linear;
    -o-transition: background-position 0.3s linear;
    transition: background-position 0.3s linear;
    -webkit-transform: translateY(3px);
    -moz-transform: translateY(3px);
    transform: translateY(3px);
}
.button_default:focus {
  outline:0;
}

<form method="link" action="create/create.php">
  <input class="button_default" type="submit" value="CREATE NEW">
</form>

Answer 1

从按钮中删除默认的 border:border: none。

.button_default {
    display: inline-block;
    background: #1188f0;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e8cff), color-stop(100%,#1188f0));
    background: -moz-linear-gradient(center top, #2e8cff 0%, #1188f0 100%);
    -webkit-box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
    -moz-box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
    box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: background-color 0.2s linear;
    -moz-transition: background-color 0.2s linear;
    -o-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
    text-shadow: 0px 1px 0px #006ac7;
    padding: 5px 15px;
    text-transform: uppercase;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
}
.button_default:hover {
    background: #1995fa;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e8cff), color-stop(100%,#2e8cff));
    background: -moz-linear-gradient(center top, #2e8cff 0%, #2e8cff 100%);
}
.button_default:active {
	cursor: wait;
    -webkit-box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
    -moz-box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
    box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
    -webkit-transition: background-position 0.3s linear;
    -moz-transition: background-position 0.3s linear;
    -o-transition: background-position 0.3s linear;
    transition: background-position 0.3s linear;
    -webkit-transform: translateY(3px);
    -moz-transform: translateY(3px);
    transform: translateY(3px);
}
.button_default:focus {
  outline:0;
}

input[type="submit"].button_default { border: none;}

<form method="link" action="create/create.php">
  <input class="button_default" type="submit" value="CREATE NEW">
</form>