CODEWITHSUNDEEP
jqueryhtmlcss
StudioTime
StudioTime

Reputation: 23989

using images as radio buttons using css and jquery

I'm trying to use one single image sprite for typical male / female radio buttons but its simply showing nothing and i'm struggling to understand why:

jquery code:

<script type="text/javascript">
$(function() {
$('input:radio').each(function() {
    $(this).hide();
    $('<a class="radio-fx" href="#"><div class="radio"></div></a>').insertAfter(this);
});
$('.radio-fx').live('click',function(e) {
    e.preventDefault();
      var $check = $(this).prev('input');
      $('.radio-fx div').attr('class','radio');
      $(this).find('div').attr('class','radio-checked');          
      $check.attr('checked', true);
});
});
</script>

The CSS I'm trying:

    #male .radio {
    background: url(/images_/icons/mf_radio.png) no-repeat;
    background-position: 0 0;
    width: 57px;
    height: 63px;
}

#male .radio:hover {
    background-position: 0 -62px;
}

#male .radio-checked {
    background: url(/images_/icons/mf_radio.png) no-repeat;
    background-position: 0 -124px;
    width: 57px;
    height: 63px;
}

#female .radio{
    background: url(/images_/icons/mf_radio.png) no-repeat;
    background-position: -57px 0px;
    width: 57px;
    height: 63px;
}

#female .radio:hover {
    background-position: -57px -62px;
}

#female .radio-checked {
    background: url(/images_/icons/mf_radio.png) no-repeat;
    background-position: -57px -124px;
    width: 57px;
    height: 63px;
}

Finally, the html:

<input type="radio" class="radio" id="female" value="Female" />
<input type="radio" id="male" name="gender" value="Male" />

Upvotes: 1

Views: 2178

Answers (3)

My Head Hurts
My Head Hurts

Reputation: 37665

It displays nothing because you are hiding the radio buttons using with $(this).hide(), then adding some anchor tags after the radio buttons with the class .radio-fx and a child div with the class .radio.

Your CSS references elements nested within an id (such as #male .radio) and not after. So there is nothing that references the .radio-fx .radio element in your CSS and the elements themselves contain no visual content - therefore you see nothing.

For a quick CSS fix you could change your selectors to #id + * > .class, for example #male .radio would become #male + * > .radio.

You might also want to add a.radio-fix{ display: block; } since you are nesting a div within an anchor tag.

On an additional note, you should probably consider adding some text to your anchor tags as I believe screen readers will see it as an empty anchor tag (how you see it now with no visible content).

Upvotes: 1

Alexander Pavlov
Alexander Pavlov

Reputation: 32286

You will need to specify -webkit-appearance: none for your overrides to take effect on Webkit browsers.

Upvotes: 0

Jon
Jon

Reputation: 3203

Your problem is that in your javascript you hide the input elements with the #male/#female IDs and in your CSS you use them as selectors to style your graphic radio buttons. Remove the #male/#female from the CSS or add them to the HTML you create with your javascript. It's hard to say which is best as we can't see the image you're using and therefore exactly what you're trying to achieve.

Here's a quick fiddle for you: http://jsfiddle.net/7XEnc/9/

Upvotes: 1

Related Questions