css - :擬似要素が入力要素に画像を表示しない前

Question

テキスト「コメント」の前に画像を表示したいのですが、ボタンの中にまだあります。そのようなことは可能ですか？

ライブバージョン: http://jsfiddle.net/yGk9Z/

html

<input name="commit" type="submit" value="Comment">

CSS

input[type=submit]:before {
    content: url("comment.png"); } 

前もって感謝します：）

Answer 1

または、代わりにボタンを使用できます。

<button>Comment</button>​

button:before{content: url("http://i.imgur.com/X1UMz.png")}; 

Answer 2

背景画像として使用できます：

input[type=submit] {
  background-image: url("http://i.imgur.com/X1UMz.png");
  background-repeat: no-repeat;
  padding-left: 25px;
}

Answer 3

代わりにabackground-imageと a leftを使用します。padding

input[type=submit]{
   background: #fff url(comment.png) no-repeat left center;
   padding-left: 32px; /* insert your actual img-width + some pixel space */
}