Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

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

Reference URL

Comments

  1. MaksimC

    I use :root pseudoselector to do the same thing.

  2. Vale
    Permalink to comment#

    Thanks! Huge help!

  3. Benjamin Blum
    Permalink to comment#

    Will this work for wpec?

  4. 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. Dude

    Thanks – saved my life!

  6. Diego
    Permalink to comment#

    Great! very nice

  7. Allan
    Permalink to comment#

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

    Thanks,

  8. 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. Kanu mandaliya
    Permalink to comment#

    Reference url not working.

  10. Madhu K Pillai
    Permalink to comment#

    Please provide us a demonstration page??

  11. tarek

    yea we need a demo for this plz

  12. Mike
    Permalink to comment#

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```