CSS按钮值样式化

Question

如果我有以下这行代码：

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

这正是我一直寻找的。非常感谢大家。

- TMNuclear

Answer 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。

- Henrik

---

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

Answer 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>

那对我有用。

- RTB

Answer 3

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

然后添加CSS

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

- Jhonathan H.

Answer 4

我希望您正在查看这个……

演示

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

- Shailender Arora

Answer 5

尝试：

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

fiddle

- Roman

Answer 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
}

- james

Answer 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

}​

演示

- Sowmya

Answer 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'/>");

- ninjacoder