CSS 按钮值样式答案

【问题标题】：CSS Button Value StylingCSS 按钮值样式
【发布时间】：2012-11-21 09:03:49
【问题描述】：

如果我有这行代码：

<input type="submit" class="mybutton" name="add" value="Add new"/>

如何使用 CSS 设置按钮值的样式？我需要在它的值之前添加一个图像，因此我需要在值输出处使用这行代码：

<span class="add">Add new</span>

我尝试过这样的事情：

<input type="submit" class="mybutton" name="add" value="">
<span class="add">Add new</span></input>

哈哈，但这完全没有任何意义。

谁有好的建议？

编辑

哇，感谢您的快速响应。忘了说我使用“sexybuttons”的.CSS文件，所以我不能改变样式，需要其他方法。

<button type="submit">

是我一直在寻找的。非常感谢。

【问题讨论】：

标签： html css button styling

【解决方案1】：

您可以尝试使用button 标签代替input。

<button type="submit" class="mybutton" name="add">
  <img src="path_to_image">
  <span class="add">Add new</span>
</button>

或者您可以使用 CSS 为按钮设置 background-image。

【讨论】：

如果您在 HTML 表单中使用 <button> 元素，不同的浏览器可能会提交不同的值。使用<input> 在 HTML 表单中创建按钮。

【解决方案2】：

您可以使用 css 设置背景图像并将其应用于按钮，如下所示：

css：

input[type=button],input[type=submit],button{
    background:url(images/btn-verzend.jpg) no-repeat;
    width:91px;
    height:35px;
    line-height:35px;
    border:none;
    color:#FFF;
    cursor:pointer;
}

html：

<input type="submit" name="add" value="Send" />
<input type="button" name="add" value="Send" />
<button>Send</button>

这对我有用。

【讨论】：

【解决方案3】：

<input type="submit" class="mybutton" name="add" value="Add new"/>

然后添加一个css

.mybutton{
   // use css background attributes
   background:transaparent url(//image);
}

【讨论】：

【解决方案4】：

我希望你在看这个...........

DEMO

HTML

<input type="submit" class="mybutton" name="add" value=""/>

CSS

.mybutton {
background: url(http://coursesandevents.anjaschuetz.net/wp-content/uploads/2010/01/submit_button_large_red.jpg) no-repeat 0 0;
  width:248px;
  height:262px;
  border:none;
}

【讨论】：

【解决方案5】：

试试：

<button type="submit" class="mybutton" name="add" value="">
  <span class="add">Add new</span>
</button>

fiddle

【讨论】：

【解决方案6】：

<input type="submit" class="mybutton" name="add" value="Add new"/>

.mybutton{
background:url(image.jpg)no-repeat;
height:12px;
width:12px;
color:#fff;
border:none
}

【讨论】：

【解决方案7】：

HTML

<input type="submit" class="mybutton" name="add" value="Add New" />

CSS

input{
    background:#58D3F7 url(http://png-1.findicons.com/files/icons/1580/devine_icons_part_2/128/home.png) no-repeat left;
    background-size:20px;
    padding:10px 25px;
    text-align:center;
    border:none; border-radius:3px; cursor:pointer

}

DEMO

【讨论】：

【解决方案8】：

你也可以这样做：

<span id="addSubmitButton" class="add" class="mybutton">Add new</span>

然后将这个添加到 css 中：

.mybutton:before{
content:"url(image.jpg)";
}

或者您可以使用 jquery 来完成，而无需更改原始代码，如下所示：

$("#addSubmitButton").before("<img src='image.jpg' alt='image'/>");

【讨论】：