HTML - 样式化表单按钮答案

【问题标题】：HTML - Styling a Form ButtonHTML - 样式化表单按钮
【发布时间】：2012-04-27 05:13:58
【问题描述】：

我正在尝试为我的表单设置提交按钮的样式。我正在查看“按钮”标签，并添加了我的 CSS 样式，但按钮的默认样式仍然很糟糕。

这是我目前所拥有的：

<button name="visit_return_button" id="visit_return_button" type="submit" class="visit_return_button">
Increase
</button>

我的 css 样式可以正常工作，但我的边框和背景颜色看起来也很糟糕。我也在研究 JavaScript，但我不喜欢并非所有浏览器都启用 JS 的想法。

下面是按钮的图片，上面是它的样子，下面是它的样子：

这是我的 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;
}

不胜感激，谢谢

【问题讨论】：

您能告诉我们您使用的是什么浏览器吗？在设置按钮样式时，不同的浏览器有不同的障碍需要克服。另外，如果没有截图，“可怕”和“讨厌”也不是很好的描述。
我已经更新了我的问题，对此感到抱歉。我正在使用 chrome，它也在 safari 中使用
你为什么要填充按钮并给它一个高度？
你能提供build_button.png吗？我正在测试一个解决方案。

标签： javascript html css button styles

【解决方案1】：

要么尝试像 border:0; 一样隐藏 border 并调整背景以满足您的需要，要么不使用背景图像并尝试使用纯 css 和 border-radius 这似乎是一个更好的主意。见http://jsfiddle.net/qVkRs/1/

【讨论】：

padding: 0; line-height: 30px;

【解决方案2】：

首先你要为你的按钮创建一个全局样式，否则你将不得不将这些样式应用到每个按钮 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 */
}

这会将这些样式应用于整个网站的所有按钮。如果您需要将其他样式应用于特定按钮或覆盖上述某些样式，则使用 id 并将其放在上述代码下方。还要去掉按钮标签上的 class="" 属性，你不需要它，而且据我们所见，它没有被使用。希望这可以帮助。祝你好运！

【讨论】：

【解决方案3】：

您可以通过 CSS3 Border-Radius 属性轻松制作您的按钮：-

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

<button id="visit_return_button" type="submit">Increase</button>

演示：- http://jsfiddle.net/VY8xs/3/

【讨论】：

【解决方案4】：

只需隐藏按钮的边框并设置背景颜色

background:#ffffff url('your_image.png');

【讨论】：

顺便说一句，#ffffff 是不必要的。

【解决方案5】：

这是我的解决方案；我已经用所有主要的浏览器进行了测试，即使没有背景图片，它也能正常工作。除了 IE8 不做圆角。

http://jsfiddle.net/uSphG/3/

我添加了一些样式属性，以防万一。有些功能在不同的浏览器上有不同的默认值。

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;*/
}

【讨论】：

【解决方案6】：

我认为您正在尝试删除边框。这可以通过以下方式完成：

border:none;

我冒昧地整理了这里的原始 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 */
}

另外，如果这是一个表格，最好使用：

<input type="button" value="Increase"/>

用于按钮；和：

<input type="submit" value="Increase"/>

专门用于提交按钮。

【讨论】：

为什么input type="button" 比button 更好？
@mrlister 因为它与表单中的所有其他输入法一致；它也更简洁。 <button></button> 标签用于包含其他 html 元素的按钮。见：stackoverflow.com/questions/469059/…
我会给你更简洁的，没有 HTML。但并非所有控件都是input 元素；想想 textareas、选择、链接……

【解决方案7】：

库通常是跨多种浏览器类型一致地设置按钮样式的良好解决方案。看看jQuery buttons、YUI Buttons，还有很多others。

【讨论】：

只为一个简单的按钮添加java脚本是荒谬的