{"id":14166,"date":"2013-02-17T18:25:37","date_gmt":"2013-02-18T01:25:37","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14166"},"modified":"2015-03-27T08:18:38","modified_gmt":"2015-03-27T15:18:38","slug":"checked","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/c\/checked\/","title":{"rendered":":checked"},"content":{"rendered":"<p>The <code>:checked<\/code> pseudo-class in CSS selects elements when they are in the selected state. It is only associated with input (<code>&lt;input&gt;<\/code>) elements of type radio and checkbox <!--and options (<code>&amp;lt;option&gt;<\/code>)-->.  The <code>:checked<\/code> 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.<\/p>\n<p>So when a checkbox is checked, and you are targeting the label immediately after it:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">input[type=checkbox] + label {\r\n  color: #ccc;\r\n  font-style: italic;\r\n} \r\ninput[type=checkbox]:checked + label {\r\n  color: #f00;\r\n  font-style: normal;\r\n} <\/code><\/pre>\n<p>The label text will turn from grey italic to red normal font. <\/p>\n<pre rel=\"HTML\"><code class=\"language-markup\">&lt;input type=\"checkbox\" id=\"ossm\" name=\"ossm\"&gt; \r\n&lt;label for=\"ossm\"&gt;CSS is Awesome&lt;\/label&gt; <\/code><\/pre>\n<p><input type=\"checkbox\" id=\"ossm\" name=\"ossm\"> <label for=\"ossm\">CSS is Awesome<\/label> <\/p>\n<p>The above is an example of using the <code>:checked<\/code> pseudo-class to make forms more accessible. The <code>:checked<\/code> pseudo-class can be used with hidden inputs and their visible labels to build interactive widgets, such as image galleries.<\/p>\n<h3>More Resources<\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/the-checkbox-hack\/\">The checkbox hack<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/CSS\/:checked\" rel=\"noopener\">MDN Docs on :checked<\/a><\/li>\n<li><a href=\"http:\/\/www.w3.org\/TR\/selectors\/#checked\" rel=\"noopener\">The W3C spec on :checked<\/a><\/li>\n<\/ul>\n<h3 id=\"browser-support\">Browser Support<\/h3>\n<table class=\"browser-support-table\">\n<thead>\n<tr>\n<th class=\"chrome\"><span>Chrome<\/span><\/th>\n<th class=\"safari\"><span>Safari<\/span><\/th>\n<th class=\"firefox\"><span>Firefox<\/span><\/th>\n<th class=\"opera\"><span>Opera<\/span><\/th>\n<th class=\"ie\"><span>IE<\/span><\/th>\n<th class=\"android\"><span>Android<\/span><\/th>\n<th class=\"iOS\"><span>iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td data-browser-name=\"Chrome\" class=\"yep\">Any<\/td>\n<td data-browser-name=\"Safari\" class=\"yep\">3.1+<\/td>\n<td data-browser-name=\"Firefox\" class=\"yep\">Any<\/td>\n<td data-browser-name=\"Opera\" class=\"yep\">9+<\/td>\n<td data-browser-name=\"IE\" class=\"yep\">9+<\/td>\n<td data-browser-name=\"Android\" class=\"yep\">any<\/td>\n<td data-browser-name=\"iOS\" class=\"yep\">any<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>The :checked pseudo-class in CSS selects elements when they are in the selected state. It is only associated with input (&lt;input&gt;) 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 [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":14160,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":14174,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/d\/default\/","url_meta":{"origin":14166,"position":0},"title":":default","date":"September 6, 2011","format":false,"excerpt":"The :default pseudo selector will match the default in a group of associated elements, such as the radio button in a group of buttons that is selected by default, even if the user has selected a different value. input[type=\"radio\"]:default + label:after { content: ' (default)'; color: #999; font-style: italic; }\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14180,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/e\/enabled\/","url_meta":{"origin":14166,"position":1},"title":":enabled","date":"April 18, 2013","format":false,"excerpt":"The :enabled pseudo-class in CSS selects focusable elements that are not disabled, and therefore enabled. It is only associated with form elements (<input>, <select>, <textarea>). Enabled elements include ones in that you can select, that you can enter data into, or that you can focus on or click. So when\u2026","rel":"","context":"With 4 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":15146,"url":"https:\/\/css-tricks.com\/snippets\/css\/custom-checkboxes-and-radio-buttons\/","url_meta":{"origin":14166,"position":2},"title":"Custom Checkboxes and Radio Buttons","date":"November 23, 2011","format":false,"excerpt":"The selectors here are specific to Wufoo markup, but the concepts at work can work for any form. The overall idea is that you make the default radio buttons and checkboxes invisible by setting their opacity to zero, and replace them with graphics. Then use the :checked selector to alternate\u2026","rel":"","context":"With 21 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":375761,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/h\/has\/","url_meta":{"origin":14166,"position":3},"title":":has()","date":"December 19, 2022","format":false,"excerpt":"The CSS :has() pseudo-class selects elements that contain other elements that match the selector passed into its arguments. It's often referred to as \"the parent selector\" because of its ability to select a parent element based on the child elements it contains and apply styles to the parent. \/* Select\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":9232,"url":"https:\/\/css-tricks.com\/snippets\/css\/custom-radio-buttons\/","url_meta":{"origin":14166,"position":4},"title":"Custom Radio Buttons","date":"May 2, 2011","format":false,"excerpt":"#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\u2026","rel":"","context":"With 15 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":13282,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/test-if-at-least-one-checkbox-is-checked\/","url_meta":{"origin":14166,"position":5},"title":"Test if at least one checkbox is checked","date":"July 12, 2011","format":false,"excerpt":"In this example, a submit button is disabled if none of the checkboxes are checked and enabled if at least one is checked. The trick is that you can use .is(\":checked\") on a jQuery object full of a bunch of elements and it'll return true if any of them are\u2026","rel":"","context":"With 8 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14166"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14166"}],"version-history":[{"count":20,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14166\/revisions"}],"predecessor-version":[{"id":199099,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14166\/revisions\/199099"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14160"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14166"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}