提交按钮CSS样式

Question

需要将我的提交按钮设置为与网站上的其他按钮一样的样式。这是html代码：

<p><input type='submit' value='Search' class='button'></p>

和css

.button:link, .button:active, .button:visited {
background: #000000;
color: #ffffff;
text-decoration: none;
font-size: 12px;
padding: 5px 15px 5px 15px;
border: 0px;
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
.button:hover {
background: #333333;
background-image: -webkit-linear-gradient(top, #333333, #000000);
background-image: -moz-linear-gradient(top, #333333, #000000);
background-image: -ms-linear-gradient(top, #333333, #000000);
background-image: -o-linear-gradient(top, #333333, #000000);
background-image: linear-gradient(to bottom, #333333, #000000);
color: #ffffff;
font-size: 12px;
padding: 5px 15px 5px 15px;
border: 0px;
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
}

悬停效果很好。但是当没有悬停时，正常的灰色框就在那里。有什么想法吗？

Answer 1

将.button:link, .button:active, .button:visited {替换为.button:link, .button:active, .button:visited, .button {

您尚未为.button本身添加默认样式。

Answer 2

试试这个

.button{
background: #000000;
color: #ffffff;
text-decoration: none;
font-size: 12px;
padding: 5px 15px 5px 15px;
border: 0px;
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
.button:hover {
background: #333333;
background-image: -webkit-linear-gradient(top, #333333, #000000);
background-image: -moz-linear-gradient(top, #333333, #000000);
background-image: -ms-linear-gradient(top, #333333, #000000);
background-image: -o-linear-gradient(top, #333333, #000000);
background-image: linear-gradient(to bottom, #333333, #000000);
color: #ffffff;
font-size: 12px;
padding: 5px 15px 5px 15px;
border: 0px;
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5px;
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
}

Answer 3

伪类:link，:active和:visited仅对<a>元素有效，而不适用于<input>元素。仅使用。button作为非悬停状态，它将起作用。

Answer 4

请参阅此fiddle

您可以选择submit按钮作为input[type="submit"]

input[type="submit"]{
    background: red;
}

请在docs

中详细了解属性选择器

或

您可以使用.button设置提交按钮的样式，因为它具有类button

因此将下面的一个添加到你的CSS

.button{
    background: red;
}

请参阅fiddle