Remove value element attribute of input element using only CSS

Question

I have a submit button that I am trying to replace with an image

<input type="submit" value="Continue" /> 

I can’t change the HTML and can’t use JavaScript. I only have access to CSS.

Is it possible to remove the word "Continue" ( value attribute) only with CSS?

EDIT

I really was able to style the button with the image. Now I want to remove the "Continue" button. I did this by setting the text-indent value to a negative value that was suggested here a while ago, but has been removed. I wonder who posted it so that I could accept it as an answer.

Answer 1

Despite the fact that even one answer here seems to achieve the desired effect, here is a much shorter and less ugly way to do this, which can also hardly be considered a “hack”. However, what the following does is just hiding the text. You can add a background-image rule (do not forget to specify the exact dimensions so that the image fits correctly) so that it displays the image in the entire area of ​​the button. I leave this exercise for you.

 color: transparent; 

Answer 2

 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 that your image path refers to a stylesheet.

Answer 3

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

Answer 4

When adding an answer to SpaceBeer , it is useful to use a negative text-indent and delete the text, if 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 places suggest. In addition, here you can find a demo: http://jsfiddle.net/6MKKh/