remove value attribute of input element using CSS only

Question

I have a \"Submit\" button which I\'m trying to replace with an image

I can\'t modify th

Answer 1

I haven't found anything that doesn't leave a bad taste in my mouth, but an alternative to font-size: 0 which makes using em and ex units for the element impossible, is to make the text render with transparent "brush", effectively not rendering it at all:

color: transparent;

Note that the above rule applied to an input element has no effect on the color of the placeholder text in the element.

There is still a number of potentially undesirable traits to this solution -- you would probably want to at least add user-select: none along with the above rule, to disable user selection of text, because selecting it would expose it against the solid background color of the selection, which may or may not be desirable.

Answer 2

Adding to SpaceBeer's answer, it is good to use a negative text-indent and remove the text, if there's any.

input[type="submit"] {
  font-size:0;
  width:120px;
  height:30px;
  background: url('dir/image.png') no-repeat left top;
  border: none;
  overflow: hidden;
  text-indent: -99em;
}

And this is the right way, almost all the places suggest. Also, you can find a demo here: http://jsfiddle.net/6MKKh/

Answer 3

input[type="submit"] {
  font-size:0;
  width:120px;
  height:30px;
  background: url('dir/image.png') no-repeat left top;
  border: none;
}

This will do the trick. Remember your image path is relative to the stylesheet.

Answer 4

Using font-size: 0:

input[type="submit"] {
    font-size:0;
    width:100px;
    height:20px;
    background:red; /** or `background: url('some.jpg') no-repeat 0 0;` */
    border:0;
    cursor:pointer;
}

Demo