:checked | CSS-Tricks

Sara Cope on Feb 17, 2013 (Updated on Mar 27, 2015)

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>

CSS is Awesome

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

Paul Garcia

# April 24, 2012

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; … }

Kuro

# July 24, 2013

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

Kevin Boucher

# July 30, 2013

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# November 27, 2014

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

Dennis Claassen

# October 16, 2013

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

Browser support is almost the same. See https://css-tricks.com/almanac/selectors/n/not/

Klaus Schleusener

Permalink to comment# August 8, 2015

Hello Dennis, thank you very much for your comment.

Skumbabs

# March 13, 2014

Hello,

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

Thanks

Tanya

Permalink to comment# May 27, 2014

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

TSF NAEM

# April 16, 2014

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;

}

joedeo

Permalink to comment# June 20, 2016

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

# August 18, 2014

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# October 17, 2014

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.

every

# August 25, 2014

Thank you man!

Gunnar Bittersmann

# October 16, 2014

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.

mikhil jose

# October 16, 2014

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)

Jugal

# November 23, 2014

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.

Jugal

# November 23, 2014

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

Jamie

Permalink to comment# January 26, 2015

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.

Somnath Mukherjee

# December 19, 2014

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.

Jay Tell

# March 5, 2015

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

Tim Plummer

# July 9, 2015

Has anyone tried to do this with :focus?

Xahjck

Permalink to comment# July 12, 2015
@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>
```

Marc

# October 26, 2015

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:

http://codepen.io/anon/pen/rOdQOQ

Thanks in advance

Marc

# October 26, 2015

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

Thanks.

Marc

Mat Harden

# November 6, 2015

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 */

adir

# January 4, 2016

this works without JS
http://codepen.io/anon/pen/NxdVRX

MJB

# February 17, 2016

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

MJB

# February 17, 2016

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

Mat

Permalink to comment# February 17, 2016
```
input[readonly]:checked
```
But readonly is ignored on radio buttons, so it’s nonsensical.

siva

# April 25, 2016

How to disable radio button after selection

Ajay Gopal Shrestha

# April 28, 2016

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

trial

# June 9, 2016

vgjdfighbn

Miah Ekholm

# June 29, 2016

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}

Miah Ekholm

# June 30, 2016

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>

Miah Ekholm

# June 30, 2016

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>

Miah

# June 30, 2016

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>

Joe, UX Designer

# September 19, 2016

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.

Joe, UX Designer

Permalink to comment# September 19, 2016

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

Max

# February 10, 2018

Hi, Can anybody help me? I’m practicing a to-do list website and I added the following attribute to my CSS file. It doesn’t allow me to uncheck any checkbox after it was checked. What should I do?

If I remove this attribute, any checkbox can be checked or unchecked.

input[type=checkbox]:checked + label {
    text-decoration: line-through;
    opacity: 0.4;
}

I’m working on Google Chrome Version 64.0.3282.140 (Official Build) (64-bit).

Geoff Graham

Permalink to comment# February 10, 2018

Hm, that’s odd. The CSS should not change the state of the checkbox, but merely style it based on the state of it — in this case, when it is in a checked state. Have you tried removing one each property individually to see if one of them is the culprit? That might help isolate the issue, if it is in the CSS.
Max

Permalink to comment# February 11, 2018

I did some cleaning and now it’s working just fine! I don’t remember what was the previous state in order to compare them and learn about it :-\ Thank you for your help.

dennisclaessens

# October 31, 2018

I try this, but it seems I cannot target an alement which is outside the form element where the checkbox is. Is this not possible?

Geoff Graham

Permalink to comment# October 31, 2018

Hey there! Do you happen to have a link to a Codepen (or some other demo with the code) where that is?

Rex

# February 23, 2019

How can I get different styles for different checkboxes’ labels, on same page?
I’ve trying several ideas and nothing works for me.
I always get the same style for all my labels on different checkboxes.
Thanks in advance.

Mukesh Yadav

Permalink to comment# January 7, 2022

You can use parent class.

More Resources

Browser Support

Comments

Leave a Reply Cancel reply