Question

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

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

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

我的CSS风格正常，但我也看到了令人讨厌的边框和背景颜色。我也在研究JavaScript，但我不喜欢并非所有浏览器都有JS活动的想法。

下面是按钮的图像，顶部是它的样子，底部是它的样子：

enter image description here

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

感谢任何帮助，谢谢

Answer 1

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

Answer 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 =“”属性，您不需要它，并且我们可以看到它没有被使用。希望这可以帮助。祝你好运！

Answer 3

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

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

具体为SUBMIT按钮。

Answer 4

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

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

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

Answer 6

您可以通过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/

Answer 7

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

HTML - 样式表单按钮

7 个答案: