我有一个我正在使用的按钮类,它会覆盖我的默认按钮或输入类型=“按钮”元素的渐变.以下是默认代码:
input[type="button"],input[type="submit"],input[type="reset"],button {
background:#05ABE0;
background:linear-gradient(to bottom,#87E0FD 0%,#53CBF1 25%,#05ABE0 50%);
background:-moz-linear-gradient(top,#05ABE0 50%);
background:-ms-linear-gradient(top,#05ABE0 50%);
background:-o-linear-gradient(top,#05ABE0 50%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#87E0FD),color-stop(25%,#53CBF1),color-stop(50%,#05ABE0));
background:-webkit-linear-gradient(top,#05ABE0 50%);
border:solid 2px #0076A3;
border-radius:0.3em;
-moz-border-radius:0.3em;
-o-border-radius:0.3em;
-webkit-border-radius:0.3em;
font-size:1em;
padding:0.4em;
display:inline-block;
margin-right:5px;
margin-left:5px;
font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
color:white;
vertical-align:middle;
text-shadow:rgba(0,0.7) 0px 2px 2px;
Box-shadow:inset 0 1px 1px white;
-moz-Box-shadow:inset 0 1px 1px white;
-webkit-Box-shadow:inset 0 1px 1px white;
background-size:100% 200%;
-moz-background-size:100% 200%;
-o-background-size:100% 200%;
-webkit-background-size:100% 200%;
-moz-transition:all 0.1s linear;
-o-transition:all 0.1s linear;
-webkit-transition:all 0.1s linear;
}
这是覆盖类:
.orange {
border:2px solid #BF4619;
background: #FF7700;
background:linear-gradient(to bottom,#FFD0A8 0%,#FFAE68 25%,#FF7700 50%);
background:-moz-linear-gradient(top,#FF7700 50%);
background:-ms-linear-gradient(top,#FF7700 50%);
background:-o-linear-gradient(top,#FF7700 50%);
background:-webkit-gradient(linear,#FFD0A8),#FFAE68),#FF7700));
background:-webkit-linear-gradient(top,#FF7700 50%);
background-size:100% 200%;
-moz-background-size:100% 200%;
-o-background-size:100% 200%;
-webkit-background-size:100% 200%;
}
当我使用< button type =“button”class =“orange”>橙色按钮< / button>它工作正常,但当我使用< input type =“button”class =“orange”value =“Orange button”/>它将恢复为不在橙色类中的默认样式.为什么是这样?
PS:如何在Stackoverflow上进行多行缩进?这就是为什么我的代码都在示例中的同一个块中.