Adding background for radio

css file:

.radio {
  background: url(images/radio-off.png) no-repeat;
  height: 21px;
  width: 21px;
}

html file:

<input type="radio" na开发者_如何学运维me="sendmail" class="radio" value="send" />

It still doesn't show the background, it still shows the "classic" one. What am I doing wrong?

Thank you.

---

You didn't mention what browser you're using - this is important information.

The ability to style radio buttons (and form elements in general) varies a lot between different browsers.

See here: http://www.456bereastreet.com/lab/form_controls/radio_buttons/

The usual workaround is to use JavaScript to replace the radio buttons with custom elements, that you can style however you like.

For example: jqTransform.

---

You can't style radio buttons like that because they are native O/S controls.

The solution, for now anyway, is to overlay an element that mimics a radio button on top of the original radio.

Check out input enhancement libraries such as http://www.emblematiq.com/lab/niceforms/.

---

The best way to do this is with Javascript to ensure cross browser compatibility. You can use the following script.

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/