CODEWITHSUNDEEP
htmlcss
Obay
Obay

Reputation: 3205

remove value attribute of input element using CSS only

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.

Upvotes: 6

Views: 24636

Answers (4)

Armen Michaeli
Armen Michaeli

Reputation: 9180

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.

Upvotes: 28

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

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

Upvotes: 3

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167250

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/

Upvotes: 1

SpaceBeers
SpaceBeers

Reputation: 13957

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.

Upvotes: 5

Related Questions