CODEWITHSUNDEEP
htmlcss
good_evening
good_evening

Reputation: 21759

Adding background for radio

css file:

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

html file:

<input type="radio" name="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.

Upvotes: 0

Views: 1816

Answers (3)

Hussein
Hussein

Reputation: 42818

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/

Upvotes: 0

thirtydot
thirtydot

Reputation: 228222

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.

Upvotes: 1

simshaun
simshaun

Reputation: 21466

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/.

Upvotes: 0

Related Questions