Custom Radio Buttons

#foo:checked::before,
input[type="checkbox"] {
    position:absolute;
    clip: rect(0,0,0,0);
    clip: rect(0 0 0 0);
}

#foo:checked,
input[type="checkbox"] + label::before {
    content: url('checkbox.png');
}

input[type="checkbox"]:checked + label::before {
    content: url('checkbox-checked.png');
}

#foo doesn't reference any particular element, it's there purely to prevent browsers from implementing the later selectors if it doesn't understand that (since most browsers will drop the entire selector if any part of it fails).

Comments

  1. User Avatar
    MaksimC

    I use :root pseudoselector to do the same thing.

  2. User Avatar
    Vale
    Permalink to comment#

    Thanks! Huge help!

  3. User Avatar
    Benjamin Blum
    Permalink to comment#

    Will this work for wpec?

  4. User Avatar
    David
    Permalink to comment#

    This is super slick, but I am using this on an iPad 3 retina screen and now I’m not sure how to target the item with any manner to…retinize. Any thoughts?

  5. User Avatar
    Dude

    Thanks – saved my life!

  6. User Avatar
    Diego
    Permalink to comment#

    Great! very nice

  7. User Avatar
    Allan
    Permalink to comment#

    Yes this seems nice, but I also need styling for radio buttons. Do you have anything for that?

    Thanks,

  8. User Avatar
    Allan
    Permalink to comment#

    Hello again,

    in looking over the code I do not understand the

    label::before

    part of the code.

    What does the html look like for this css?

    It just seems to be incomplete without the other half of the picture.

    Thank you

  9. User Avatar
    Kanu mandaliya
    Permalink to comment#

    Reference url not working.

  10. User Avatar
    Madhu K Pillai
    Permalink to comment#

    Please provide us a demonstration page??

  11. User Avatar
    tarek

    yea we need a demo for this plz

  12. User Avatar
    Mike
    Permalink to comment#
  13. User Avatar
    Alyssa

    Thank you! This worked, except by default both my radio buttons (yes/no) are selected. Is there a way to fix this?

    #foo:checked::before,
    input[type=”radio”] {
    position:absolute;
    clip: rect(0,0,0,0);
    clip: rect(0 0 0 0);
    }

    #foo:checked,
    input[type=”radio”] + label::before {
    content: url(‘images/gafl-radio-checked.png’);
    }

    input[type=”radio”]:checked + label::before {
    content: url(‘images/gafl-radio-unchecked.png’);
    }

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag