javascript HTML - 样式化表单按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10164555/
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
HTML - Styling a Form Button
提问by Oliver Jones
I'm trying to style my submit button for my form. I was looking into the 'button' tag, and adding in my CSS style, but the button still has a horrible default style.
我正在尝试为我的表单设置提交按钮的样式。我正在查看 'button' 标签，并添加我的 CSS 样式，但该按钮仍然具有可怕的默认样式。
This is what I have so far:
这是我到目前为止：
<button name="visit_return_button" id="visit_return_button" type="submit" class="visit_return_button">
Increase
</button>
My css style is working, but I also get a nasty looking border and background colour. I was looking into JavaScript too, but I don't like the idea that not all browsers have JS active.
我的 css 样式正在运行，但我的边框和背景颜色也很糟糕。我也在研究 JavaScript，但我不喜欢并非所有浏览器都有 JS 活动的想法。
Below is an image of the button, the top one is what it looks like, the bottom one is what its suppose to look like:
下面是按钮的图像，顶部是它的样子，底部是它假设的样子：
Here is my CSS:
这是我的 CSS：
#visit_return_button{
width:90px;
height:30px;
position:absolute;
background-image: url(image/build_button.png);
background-repeat: no-repeat;
/*font-family: Tahoma, Geneva, sans-serif;*/
font-size: 14px;
font-weight: normal;
color: #FFF;
text-align: center;
/*margin: auto;*/
padding-top: 10px;
margin-top:-20px;
}
Would appreciate any help, thanks
将不胜感激任何帮助，谢谢
采纳答案by Shailender Arora
You can easily make your button through CSS3 Border-Radius property:-
您可以通过 CSS3 Border-Radius 属性轻松制作按钮：-
CSS
CSS
#visit_return_button{
background-color:#9C8C42;
border: 2px solid #91782c;
color: #FFF;
text-align: center;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 10px;
}
HTML
HTML
<button id="visit_return_button" type="submit">Increase</button>
demo:- http://jsfiddle.net/VY8xs/3/
回答by worenga
Either try to hide the borderlike border:0;and adjust the background to fit your needs or do not use a background image and try to do it with pure css and border-radiuswhich seems to be a better idea. See http://jsfiddle.net/qVkRs/1/
要么尝试隐藏border喜欢的内容border:0;并调整背景以满足您的需要，要么不使用背景图像并尝试使用纯 css 来完成，border-radius这似乎是一个更好的主意。见http://jsfiddle.net/qVkRs/1/
回答by Ricketts
First you want to make a global style for your buttons, otherwise you will have to apply those styles to every single button id which will be a lot of repeated css. Then change your background styles to be like below. After that, you can adjust the rest to look correct.
首先，您要为按钮创建全局样式，否则您必须将这些样式应用于每个按钮 id，这将是大量重复的 css。然后将您的背景样式更改为如下所示。之后，您可以调整其余部分以使其看起来正确。
input[type="button"], input[type="submit"], button
{
background: none;
background-image: url(image/build_button.png);
background-position: center center;
background-repeat: no-repeat;
border: 0px;
/* add the rest of your attributes here */
}
This will apply these styles to all buttons across the entire site. If you need to apply additional styles to a specific button or override some of the above, then use the id and place it below the above code. Also get rid of the class="" attribute on your button tag, you don't need it and it is not being used as far as we can see. Hope this helps. Good Luck!
这会将这些样式应用于整个站点的所有按钮。如果您需要对特定按钮应用其他样式或覆盖上述某些样式，请使用 id 并将其放在上述代码下方。还要去掉按钮标签上的 class="" 属性，你不需要它，而且就我们所见，它没有被使用。希望这可以帮助。祝你好运！
回答by Hawken
I think you're trying to remove the border. This can be done with:
我认为您正在尝试删除边框。这可以通过以下方式完成：
border:none;
I took the liberty of tidying up the original CSS here:
我冒昧在这里整理了原始 CSS：
#visit_return_button{
width:90px;
height:30px;
font:14px Tahoma, Geneva, sans-serif;
background:url(image/build_button.png) no-repeat;
color:#fff;
text-align:center;
border:none; /* removal of border */
}
Also if this is a form, it is be better to use:
此外，如果这是一种形式，最好使用：
<input type="button" value="Increase"/>
for buttons; and:
对于按钮；和：
<input type="submit" value="Increase"/>
for SUBMIT buttons specifically.
专门用于提交按钮。
回答by Nidis
Just hide the borders of the button and set background color
只需隐藏按钮的边框并设置背景颜色
background:#ffffff url('your_image.png');
回答by Mr Lister
Here's my solution; I've tested with all the major browsers and it works fine, even without the background picture. Except IE8 doesn't do rounded corners.
这是我的解决方案；我已经用所有主要浏览器进行了测试，即使没有背景图片，它也能正常工作。除了 IE8 不做圆角。
I added some style properties, just in case. Some features have different defaults on different browsers.
我添加了一些样式属性，以防万一。某些功能在不同的浏览器上有不同的默认值。
button::-moz-focus-inner {
padding: 0 !important;
border: none !important;
}
#visit_return_button{
display:inline-block;
width:90px;
padding:0; margin:0; outline:0;
background:#9B8C47;
background-image: url(image/build_button.png);
background-repeat: no-repeat;
/*font-family: Tahoma, Geneva, sans-serif;*/
border:1px solid #866517;
-moz-border-radius:0.4em;
border-radius:0.4em;
font-size: 14px; line-height:24px;
font-weight: normal;
color: #FFF;
text-align: center;
/*margin: auto;*/
}
回答by Larry K
Libraries are often a good solution for styling buttons consistently across multiple browser types. Check out jQuery buttons, YUI Buttons, and there are many othersas well.
