CODEWITHSUNDEEP
csspseudo-element
bskool
bskool

Reputation: 2068

:before pseudo element not displaying image on input element

I would like an image to appear before the text "Comment" but still inside the button. Is it possible to do something like that?

Live version: http://jsfiddle.net/yGk9Z/

html

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

css

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

Thanks in advance:)

Upvotes: 0

Views: 6423

Answers (3)

Mikael H&#228;rsj&#246;
Mikael H&#228;rsj&#246;

Reputation: 1036

Or you can use a button instead:

<button>Comment</button>​

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

Upvotes: 1

Zeta
Zeta

Reputation: 105905

Use a background-image and a left padding instead:

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

Upvotes: 0

Guffa
Guffa

Reputation: 700562

You can use it as background image:

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

Upvotes: 2

Related Questions