:checked

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

Comments

  1. User Avatar
    RITURAJ
    Permalink to comment#

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

    html code::

    jQuery code::
    $(document).ready(function(){
    alert($(“#Demo :checked”).attr(‘id’));
    });

    Result
    1

    • User Avatar
      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. User Avatar
    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. User Avatar
    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 ‘~’).

    • User Avatar
      Camilla
      Permalink to comment#

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

  4. User Avatar
    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 http://css-tricks.com/almanac/selectors/n/not/

    • User Avatar
      Klaus Schleusener
      Permalink to comment#

      Hello Dennis, thank you very much for your comment.

  5. User Avatar
    Skumbabs
    Permalink to comment#

    Hello,

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

    Thanks

    • User Avatar
      Tanya

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

  6. User Avatar
    TSF NAEM
    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”]){

    float:right;

    }

    • User Avatar
      joedeo
      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

  7. User Avatar
    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

    • User Avatar
      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. User Avatar
    every
    Permalink to comment#

    Thank you man!

  9. User Avatar
    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. User Avatar
    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. User Avatar
    Jugal
    Permalink to comment#

    Hi
    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. User Avatar
    Jugal
    Permalink to comment#

    hi

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

    • User Avatar
      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:
      input="checkbox"
      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. User Avatar
    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. User Avatar
    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.

  15. User Avatar
    Tim Plummer

    Has anyone tried to do this with :focus?

    • User Avatar
      Xahjck
      Permalink to comment#

      @Tim
      I just finished something using the :focus selector yesterday. I styled my label as if it were a ‘<div>‘ inside of an actual <div>. The :focus selector runs a check on the checkbox, not the label itself so you can’t use display:none on it. To combat that, I simply moved it up and left 9999px from the page. Also, I need a checkbox for each of my labels(‘<div>‘s) so I have to have CSS instructions for each one individually which is why I’ve numbered my id tags. This works for me because I have a known amount of boxes on my page.

      If someone knows an easier (or more efficient way) of using selectors, feel free to correct me. I just started dawdling with CSS about a week ago.

      I’m using Firefox 38.0.5 for all of this on a Windows 7.

      CSS:

      #cb1_id:focus + label:nth-of-type(1) {
        *--What to do when focused--*
      }
      
      #cb1_id:not(:focus) + label:nth-of-type(1) {
        *--What to do when focus is lost--*
      }
      

      HTML:

      <input id="cb1_id type="checkbox" style="position:fixed; left:-9999px; top:-9999px;">
      <label for="cb1_id" class="main_div">
        *--contents--*
      </label>
      
  16. User Avatar
    Marc
    Permalink to comment#

    I’ve implemented an off canvas menu on my site but the sitewrap won’t slide out to reveal the menu on iOS 4 and 5, it works just fine on all other devices and browsers. Nothing happens at all when the nav trigger is pressed so I’m assuming it’s something to do with the pseudo element ‘:checked’.

    I would appreciate any help anyone can give, it’s driving me nuts Lol!

    Here’s a link to my code on codepen:

    Thanks in advance

    Marc

  17. User Avatar
    Marc
    Permalink to comment#

    I didn’t realise anonymous pens on codepen couldn’t be submitted…Hope this one works:

    Thanks.

    Marc

  18. User Avatar
    Mat Harden
    Permalink to comment#

    It seems to be broken again for Chrome on iOS 9. See this issue https://code.google.com/p/chromium/issues/detail?id=534210

    :checked + p /* works */
    :checked ~ p /* fails */
    
  19. User Avatar
    adir
    Permalink to comment#

    this works without JS

  20. User Avatar
    vbvbvb
    Permalink to comment#

    ghghgh

  21. User Avatar
    MJB
    Permalink to comment#

    How would I use css to select read only radio buttons?

  22. User Avatar
    MJB
    Permalink to comment#

    How would I use css to select radio buttons that are both read-only and checked?

    • User Avatar
      Mat
      Permalink to comment#
      input[readonly]:checked
      

      But readonly is ignored on radio buttons, so it’s nonsensical.

  23. User Avatar
    siva
    Permalink to comment#

    How to disable radio button after selection

  24. User Avatar
    Ajay Gopal Shrestha
    Permalink to comment#

    https://jsfiddle.net/ajshres/skmw6hjd/
    how much will it make a difference if I use label as parent and span or div as the sibling and not use for and id.
    for list of checkbox, id might have to be generated unique and if we donot have to use id, would be a lot cleaner

  25. User Avatar
    trial

    vgjdfighbn

  26. User Avatar
    Miah Ekholm
    Permalink to comment#

    Lines below is a perfect working Submenu example. Shortest code?
    Guess what

    Working Submenu

    input[type=checkbox] + div {display:none} input[type=checkbox]:checked + div {display:inline-block}

  27. User Avatar
    Miah Ekholm
    Permalink to comment#

    Lines below is a perfect working Submenu example. Shortest code?
    Sorry about previous comment this one is what i want to share.

    <input type="checkbox" > Guess what <div> Working Submenu </div>
    <style>
    input[type=checkbox] + div {display:none}    
    input[type=checkbox]:checked + div {display:inline-block} 
    </style>
    
  28. User Avatar
    Miah Ekholm
    Permalink to comment#

    1st time i write here did not know about how to share code, i do now tho
    Lines below is a perfect working Submenu example. Shortest code?
    Sorry about previous comment this one is what i want to share.

    <input type="checkbox" > Guess what <div> Working Submenu </div>
    <style>
    input[type=checkbox] + div {display:none}    
    input[type=checkbox]:checked + div {display:inline-block} 
    </style>
    
  29. User Avatar
    Miah
    Permalink to comment#

    Checkbox to alternate Submenu on/off over background. iphone safe?

    <input type="checkbox" > Guess what <div> Working Submenu <br>over background</div> ????????????????????????
    <style>
    input[type=checkbox] + div {display:none}    
    input[type=checkbox]:checked + div {display:inline-block;position:absolute;background-color:#ddf} 
    </style>
    
  30. User Avatar
    Joe, UX Designer
    Permalink to comment#

    I’m reading that :checked pseudo selector also works with select options, affecting the option the user selects, not just checkbox and radio buttons. It was news to me but makes sense.

    • User Avatar
      Joe, UX Designer
      Permalink to comment#

      Also interesting: there is a 3rd state for checkboxes, radio button groups and bars. It is :indeterminate and can be set with JavaScript.

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-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag