5

我正在尝试为我的表单设置提交按钮的样式。我正在查看“按钮”标签，并添加了我的 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;
}

将不胜感激任何帮助，谢谢

4

7 回答 7

2

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

于 2012-04-15T18:10:56.563 回答
1

首先，您要为按钮创建全局样式，否则您必须将这些样式应用于每个按钮 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="" 属性，你不需要它，而且据我们所见，它没有被使用。希望这可以帮助。祝你好运！

于 2012-04-15T18:18:23.403 回答
0

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

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

专门用于提交按钮。

于 2012-04-15T18:25:09.937 回答
0

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

background:#ffffff url('your_image.png');
于 2012-04-15T18:27:40.957 回答
0

这是我的解决方案；我已经用所有主流浏览器测试过，即使没有背景图片，它也能正常工作。除了 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;*/
}
于 2012-04-15T18:29:43.817 回答
0

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

于 2012-04-16T08:57:20.863 回答
-2

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

于 2012-04-15T18:09:14.523 回答