Grow your CSS skills. Land your dream job.

:checked

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

Comments

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

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

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

  5. Skumbabs
    Permalink to comment#

    Hello,

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

    Thanks

    • Tanya

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

  6. 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;

    }

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".