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 leftpadding代替：

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