{"id":14180,"date":"2013-04-18T19:57:41","date_gmt":"2013-04-19T02:57:41","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14180"},"modified":"2020-05-11T14:58:56","modified_gmt":"2020-05-11T21:58:56","slug":"enabled","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/e\/enabled\/","title":{"rendered":":enabled"},"content":{"rendered":"\n

The :enabled<\/code> pseudo-class in CSS selects focusable elements that are not disabled, and therefore enabled. It is only associated with form elements (<input><\/code>, <select><\/code>, <textarea><\/code>). Enabled elements include ones in that you can select, that you can enter data into, or that you can focus on or click.<\/p>\n\n\n\n

So when a checkbox is checked, and you are targeting the label immediately after it:<\/p>\n\n\n\n

input:enabled + label {\n  color: #333;\n  font-style: italic;\n}<\/code><\/pre>\n\n\n\n
The label text will dark grey and italic if the checkbox is enabled, meaning the user can toggle it on and off.<\/p>\n\n\n\n
In theory, :enabled<\/code> should match an\u00a0<a>, <area><\/code>, or\u00a0<link><\/code>\u00a0with\u00a0href<\/code>\u00a0attributes, but browsers don’t seem to handle that scenario. You can style <button><\/code>,\u00a0<input><\/code>,\u00a0<textarea><\/code>,\u00a0<optgroup><\/code>,\u00a0<option><\/code>\u00a0and\u00a0<fieldset><\/code>s that are not disabled. When\u00a0<menu><\/code>\u00a0is supported, we should also be able to target\u00a0<command><\/code>\u00a0and\u00a0<li><\/code>‘s that are children of\u00a0<menu><\/code>, if not disabled.<\/p>\n\n\n\n
You would also think that elements with\u00a0contenteditable<\/code>\u00a0and\u00a0tabindex<\/code>\u00a0attributes would be selectable with the\u00a0:enabled<\/code>\u00a0pseudo-class. The spec does not state this, nor do browsers support it.<\/p>\n\n\n\n\n\n\n\n\n
Chrome<\/span><\/th>\nSafari<\/span><\/th>\nFirefox<\/span><\/th>\nOpera<\/span><\/th>\nIE<\/span><\/th>\nAndroid<\/span><\/th>\niOS<\/span><\/th>\n<\/tr>\n<\/thead>\n
All<\/td>\n3.1 <\/td>\nAll <\/td>\n9 <\/td>\n9 <\/td>\nAll <\/td>\nAll <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"
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 a checkbox is checked, and […]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":14176,"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":14166,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/c\/checked\/","url_meta":{"origin":14180,"position":0},"title":":checked","date":"February 17, 2013","format":false,"excerpt":"The :checked pseudo-class in CSS selects elements when they are in the selected state. It is only associated with 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\u2026","rel":"","context":"With 45 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14174,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/d\/default\/","url_meta":{"origin":14180,"position":1},"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":13282,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/test-if-at-least-one-checkbox-is-checked\/","url_meta":{"origin":14180,"position":2},"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":[]},{"id":375761,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/h\/has\/","url_meta":{"origin":14180,"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":14180,"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":15146,"url":"https:\/\/css-tricks.com\/snippets\/css\/custom-checkboxes-and-radio-buttons\/","url_meta":{"origin":14180,"position":5},"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":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14180"}],"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=14180"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14180\/revisions"}],"predecessor-version":[{"id":310897,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14180\/revisions\/310897"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14176"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14180"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}