你能用 css 设计 html 表单按钮的样式吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14950238/
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
Can you style html form buttons with css?
提问by Alex Mohr
I don't like the default button style. It's really boring. I am using
我不喜欢默认的按钮样式。这真的很无聊。我在用
<input type="submit">
type buttons. Can I style these somehow in css? If not, the other way of doing it i guess would be to use a div instead, and make it a link. How do you make those work with forms?
键入按钮。我可以在 css 中以某种方式设置这些样式吗？如果没有，我想另一种方法是改用 div，并将其设为链接。你如何使这些与表单一起工作？
回答by Shailender Arora
You can achieve your desired through easily by CSS :-
您可以通过 CSS 轻松实现您的愿望：-
HTML
HTML
<input type="submit" name="submit" value="Submit Application" id="submit" />
CSS
CSS
#submit {
background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:6px;
color: #fff;
font-family: 'Oswald';
font-size: 20px;
text-decoration: none;
cursor: pointer;
border:none;
}
#submit:hover {
border: none;
background:red;
box-shadow: 0px 0px 1px #777;
}
回答by ncksllvn
Yeah, it's pretty simple:
是的，这很简单：
input[type="submit"]{
background: #fff;
border: 1px solid #000;
text-shadow: 1px 1px 1px #000;
}
I recommend giving it an ID or a class so that you can target it more easily.
我建议给它一个 ID 或一个类，以便您可以更轻松地定位它。
回答by Dave Anderson
Yes you can target those specificaly using input[type=submit]e.g.
是的，您可以使用input[type=submit]例如专门针对那些
.myFormClass input[type=submit] {
margin: 10px;
color: white;
background-color: blue;
}
回答by Ricky Youssef
You can directly create your own style in this way:
您可以通过这种方式直接创建自己的样式：
input[type=button]
{
//Change the style as you like
}
回答by achoukah
You might want to add:
您可能想要添加：
-webkit-appearance: none;
if you need it looking consistent on Mobile Safari...
如果您需要它在 Mobile Safari 上看起来一致...
回答by Raj Adroit
write the below style into same html file head section or write into a .css file
将以下样式写入相同的 html 文件头部分或写入 .css 文件
<style type="text/css">
.submit input
{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9
}
</style>
<input type="submit" class="submit"/>
.submit - in css . means class , so i created submit class with set of attributes
and applied that class to the submit tag, using class attribute
.submit - 在 css 中。表示 class ，所以我创建了具有一组属性的提交类，
并使用 class 属性将该类应用于提交标记
