How do I make the "value" of the <input type="radio"> invisible?

Question

<input type="radio" value="1" id="baby">

I'd like to keep this code like that. However, can I apply a CSS to it so that the "1" is not displayed to the user?

Edit: For some reason, it is being displayed, I don't know why. I do have a CSS attached to it though.

Answer 1

The value of "1" is not displayed to the user at all, it's hidden and only has meaning when the form posts. You need to add a <label> tag or just raw text near the radio button to display the value you want the user to see.

Answer 2

For radio buttons, the value attributed is never rendered by the user agent (unless it does something rather weird). Typically, if you need a radio button with a label, you explicitly specify one, ideally using the <label> tag.

Answer 3

The "1" should not display for the user.. it's just a value..

Normally, you'd declare a radio input like so:

<label><input type="radio" value="1" id="baby"> Baby </label>

This will make "Baby" the label for the radio button, this will also make clicking on the Baby text activate the radio button, which is what accessibility rules would require..