Question

I have a “Submit” button which I’m trying to replace with an image

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

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

Is it possible to remove the word “Continue” (value attribute) using CSS only?

EDIT

I’ve actually been able to style the button with the image already. I now want to remove the “Continue” button. I’ve done it by setting the text-indent value to negative, which was suggested here a while ago, but was deleted. I wonder who posted it so I could accept it as the answer.

Answer 1

Disclaimer: this is a bad answer — I hope you know it too, deep down in your heart. If you scoff at my fair warning, aliens from CeSSei 8 will abduct you for box modeling you in 4 dimensions. Upvote this answer at own risk. I wrote it in what now seems another life, and it looks into the depths of my soul every time I read it. I weep for the Web. You have been warned.

I can’t imagine why someone would need to remove a value of a control using CSS only. I certainly have never needed to even consider doing that.

Regardless, 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.

This solution, as most such "hacks" go, has a number of issues — 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.