3

如果我有这行代码：

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

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

4

8 回答 8

8

您可以尝试使用button标签而不是input.

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

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

于 2012-11-21T09:07:15.790 回答
3

您可以使用 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>

这对我有用。

于 2012-11-21T09:08:33.650 回答
2 
<input type="submit" class="mybutton" name="add" value="Add new"/>

然后添加一个CSS

.mybutton{
   // use css background attributes
   background:transaparent url(//image);
}
于 2012-11-21T09:07:29.247 回答
2

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

演示

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;
}
于 2012-11-21T09:08:39.530 回答
1

尝试：

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

小提琴

于 2012-11-21T09:09:40.113 回答
1 
<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
}
于 2012-11-21T09:10:01.650 回答
1

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

}​

演示

于 2012-11-21T09:10:25.907 回答
1

你也可以这样做：

<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'/>");
于 2012-11-21T09:16:39.733 回答