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


Last updated on:

The :checked pseudo-class in CSS selects elements when they are in the selected state. It is only associated with input (<input>) elements of type radio and checkbox . The :checked pseudo-class selector matches radio and checkbox input types when checked or toggled to an on state. If they are not selected or checked, there is no match.

So when a checkbox is checked, and you are targeting the label immediately after it:

input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
input[type=checkbox]:checked + label {
  color: #f00;
  font-style: normal;

The label text will turn from grey italic to red normal font.

<input type="checkbox" id="ossm" name="ossm"> 
<label for="ossm">CSS is Awesome</label> 

The above is an example of using the :checked pseudo-class to make forms more accessible. The :checked pseudo-class can be used with hidden inputs and their visible labels to build interactive widgets, such as image galleries.

More Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Any 3.1+ Any 9+ 9+ any any


    Permalink to comment#

    “:checked” selector work to find out the checkbox who are checked .

    html code::

    jQuery code::
    alert($(“#Demo :checked”).attr(‘id’));


    • Paul Garcia
      Permalink to comment#

      Not just to find out the element checked but also to style it:

      #Demo:checked { color:red; text-decoration:underline; } or
      input[type=”radio”]:checked{ color:red; … }

  2. Kuro
    Permalink to comment#

    CSS is Awesome

    if I move the order, how to write the css code?
    I’ve repetition something like that, but confuse how to make it simpler like you had

  3. Kevin Boucher
    Permalink to comment#

    The above is an example of using the :checked pseudo-class to make forms more accessible.

    I’m using this technique to hide/show navigation menus in a responsive layout. However, I’m discovering that since the LABEL tag cannot have FOCUS, that this technique is not at all accessible (at least not to keyboard users). Is there a way around this?

    Also, in my experience the adjacent sibling selector (‘+’) does not work in iOS (must use the general sibling selector ‘~’).

    • Camilla
      Permalink to comment#

      IOS 8 seems to be sensitive to this. Fixed my problem to change from + to ~ ! Thanks!

  4. Dennis Claassen
    Permalink to comment#

    Might be worth mentioning that unchecked checkboxes can be specifically targeted by using :not(:checked).

    Browser support is almost the same. See

  5. Skumbabs
    Permalink to comment#


    any ideas/tricks to use it on ie8 as long as :checked does not exist?


    • Tanya

      Hi, for ie8 I add class ‘checked’ and use
      input[type=checkbox].checked + label {
      color: #f00;
      font-style: normal;

    Permalink to comment#

    there are various types of input fields in a HTML page such as text, number, email, radio, checkbox. Now how will i modify style to all input
    except radio and check box. is it right code if i do that this way :

    input:not([typy=”radio & checkbox”]){



  7. Richard Bultitude
    Permalink to comment#

    Sadly putting the label after the relevant field means that the field/label pair are not accessible according to the WCAG 2.0. There are a lot of examples of this field + label pattern out there but in order for the markup to make sense to all users and assistive technology the label should come first.

    I await the day we can use selectors which target the preceding item

    • Richard Bultitude
      Permalink to comment#

      Apologies, the above statement isn’t actually correct, it was the Surfright standards that stipulated this. Labels after radios and checkboxes are valid. The WCAG 2.0 guidelines state that radiobuttons and checkboxes can have the label positioned after and (as far as I can tell) that this is a matter of visual positioning only.

  8. every
    Permalink to comment#

    Thank you man!

  9. Gunnar Bittersmann
    Permalink to comment#

    Browser support: Android: any?

    No, unfortunately not. You named it. Android 4.2 is still affected. Your proposed hack has severe performance issues on some devices.

    I don’t have an other solution, though.

  10. mikhil jose
    Permalink to comment#

    Is there any solution if we want to repeat the “id” along with “check box” more times????? I need more check boxes and labels in my project..
    (Excuse me for my worst English)

  11. Jugal
    Permalink to comment#

    Can any one tell this

    i have two radio button.

    If i check one radio button , i want that other radio button should be checked. means check other radio button on another radio button’s checked.

  12. Jugal
    Permalink to comment#


    One more thing it should be done by HTML and CSS. Without any use of javascript

    • Jamie
      Permalink to comment#

      Hey Jugal. You can’t do that with radio inputs. Only one radio input can be selected at a time. Instead you want to use:
      However you will need to use some JS to toggle other inputs if one is selected. Can’t be done solely with HTML and CSS.

  13. Somnath Mukherjee
    Permalink to comment#

    All CSS3 pseudo-classes are pretty cooool. They not just make the life of a web designer so easy but also they focus on more semantic, clean & simpler code. Not to mention, CSS4 has already offered us more yummy awesomeness.

  14. Jay Tell
    Permalink to comment#

    Be warned this code will NOT work as expected in Safari 5.0.1 if you apply it to UL element.

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:

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