Javascript HTML-设置表单按钮的样式

我正在尝试为我的表单设置提交按钮的样式。我查看了“button”标签，并添加了我的CSS样式，但是按钮仍然有一个可怕的默认样式

这就是我到目前为止所做的：

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

---

非常感谢您的帮助，对于跨多种浏览器类型一致地设置按钮样式，库通常是一个很好的解决方案。签出，也有很多。或者尝试隐藏

边框

，如

边框：0并调整背景以满足您的需要，或者不使用背景图像，尝试使用纯css和
边框半径
来完成，这似乎是一个更好的主意。请参见
首先，如果要为按钮创建全局样式，则必须将这些样式应用于每个按钮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=”“属性，你不需要它，而且据我们所知，它没有被使用。希望这有帮助。祝你好运
 我想你是想移除边界。这可以通过以下方式实现：

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"/>



专门用于提交按钮。
只需隐藏按钮的边框并设置背景色即可

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

这是我的解决方案；我已经在所有主流浏览器上进行了测试，它运行良好，即使没有背景图片。除了IE8不做圆角


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

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

您可以通过CSS3边界半径属性轻松创建按钮：-

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>

增加

演示：-
您能告诉我们您使用的是什么浏览器吗？不同的浏览器在设置按钮样式时要克服不同的障碍。另外，如果没有屏幕截图，“恐怖”和“讨厌”也不是很好的描述。我已经更新了我的问题，很抱歉。我使用的是chrome浏览器，它在Safari中也可以。为什么你要填充按钮并给它一个高度？你能提供
build\u button.png
？我正在测试一个解决方案。只为一个简单的按钮添加java脚本是荒谬的
padding:0；线高：30px
为什么
input type=“button”
优于
button
？@mrlister，因为它与表单中的所有其他输入方法一致；而且它更简洁。
标记用于包含其他html元素的按钮。看：我会给你更简洁，没有HTML。但并非所有控件都是
输入
元素；想想文本区域、选择、链接……顺便说一下，
#ffffff
是不必要的。
<button id="visit_return_button" type="submit">Increase</button>