input[type="button"], input[type="submit"], button CSS 行为不正常
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14082458/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
input[type="button"], input[type="submit"], button CSS not behaving properly
提问by Sander Kuipers
I'm trying to get this to work but there's still something not right.
我正在努力让它发挥作用，但仍然有一些不对的地方。
I want to style the submit buttons with css to match the ones i already have.
我想用 css 设置提交按钮的样式以匹配我已经拥有的按钮。
<input type="submit" name="save_settings" value="Opslaan">
<input type="submit" name="save_settings" value="Opslaan">
Style:
风格：
input[type="button"], input[type="submit"], button
{
background: url("http://gasterijdebakker.nl/email/php/pages/images/layout/bg-btn-left.png") no-repeat scroll left top transparent;
display: inline-block;
line-height: 35px;
padding:7px 0 15px 12px;
margin:0;
border:0;
color: #FFFFFF;
font-size: 15px;
font-weight: bold;
letter-spacing: -1px;
text-shadow: 0 1px 1px #70A7E0;
}
}
回答by Mark Steggles
You would be better off not using the background image and using css3 gradient instead. Something like:
最好不要使用背景图像，而是使用 css3 渐变。就像是：
input[type="button"], input[type="submit"], button
{
background-color: #a3d4ff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#a3d4ff), to(#88bcf2));
background-image: -webkit-linear-gradient(top, #a3d4ff, #88bcf2);
background-image: -moz-linear-gradient(top, #a3d4ff, #88bcf2);
background-image: -o-linear-gradient(top, #a3d4ff, #88bcf2);
background-image: linear-gradient(to bottom, #a3d4ff, #88bcf2);
border-radius:3px;
display: inline-block;
line-height: 22px;
padding:7px 12px;
margin:0;
border: 1px solid #88bcf2;
color: #FFFFFF;
font-size: 15px;
font-weight: bold;
letter-spacing: -1px;
text-shadow: 0 1px 1px #70A7E0;
cursor:pointer;
}?
回答by hunterloftis
inputelements can't be styled completely.
input元素无法完全设置样式。
Instead, use a buttonelement.
相反，使用button元素。
button elements are much easier to style than input elements. You can add inner HTML content (think em, strong or even img), and make use of :after and :before pseudo-element to achieve complex rendering while input only accept a text value attribute.
按钮元素比输入元素更容易设计样式。您可以添加内部 HTML 内容（想想 em、strong 甚至 img），并利用 :after 和 :before 伪元素实现复杂渲染，而输入仅接受文本值属性。
source:
来源：
Mozilla Developer Network
Mozilla 开发者网络
https://developer.mozilla.org/en-US/docs/HTML/Element/button
https://developer.mozilla.org/en-US/docs/HTML/Element/button
