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

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

私はあなたがこれを探していることを願っています..........。

デモ

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 に答える
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 に答える
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 に答える