{"id":14172,"date":"2011-09-06T19:55:35","date_gmt":"2011-09-07T02:55:35","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14172"},"modified":"2015-03-27T08:26:27","modified_gmt":"2015-03-27T15:26:27","slug":"disabled","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/d\/disabled\/","title":{"rendered":":disabled"},"content":{"rendered":"<p>The <code>:disabled<\/code> pseudo-class selector provides conditional styling to HTML elements that can receive user input, when the elements have the <code>disabled<\/code> attribute. It is defined in the <a href=\"http:\/\/www.w3.org\/TR\/selectors\/\" rel=\"noopener\">CSS Selectors Level 3 spec<\/a> as a \u201cUI element state pseudo-class\u201d, meaning it is used to style content based on the user&#8217;s interaction with an input element.<\/p>\n<p>Elements that can receive the <code>disabled<\/code> attribute include <code>&lt;button&gt;<\/code>, <code>&lt;input&gt;<\/code>, <code>&lt;textarea&gt;<\/code>, <code>&lt;optgroup&gt;<\/code>, <code>&lt;option&gt;<\/code> and <code>&lt;fieldset&gt;<\/code>. There are two valid syntaxes for setting this attribute: either <code>disabled=\"disabled\"<\/code> or (in HTML5) simply the <code>disabled<\/code> Boolean keyword. An element is disabled if it can&#8217;t be activated (e.g. selected, clicked on or accept text input) or accept focus.<\/p>\n<p>Such an element can be styled using the <code>:disabled<\/code> pseudo-class selector:<\/p>\n<pre class=\"codepen\" data-height=\"300\" style=\"height: 300px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-type=\"result\" data-href=\"dvKeL\" data-user=\"zakkain\" data-safe=\"true\"><code><\/code><a href=\"http:\/\/codepen.io\/zakkain\/pen\/dvKeL\" rel=\"noopener\">Check out this Pen!<\/a><\/pre>\n<h3 id=\"points-of-interest\">Points of Interest<\/h3>\n<ul>\n<li><code>:disabled<\/code> can be \u201cchained\u201d with other pseudo-selectors: like <code>:before<\/code> or <code>:after<\/code> to generate icons or text to provide more user feedback.<\/li>\n<li>Any property that can be animated with CSS Transitions or Animations will be properly animated when the <code>disabled<\/code> attribute is added or removed from the HTML element.<\/li>\n<\/ul>\n<h3 id=\"related-properties\">Related Properties<\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/e\/enabled\">:enabled<\/a><\/li>\n<\/ul>\n<h3 id=\"other-resources\">Other Resources<\/h3>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:disabled\" rel=\"noopener\">Mozilla Docs<\/a><\/li>\n<li><a href=\"http:\/\/reference.sitepoint.com\/css\/pseudoclass-disabled\" rel=\"noopener\">Sitepoint<\/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\">All<\/td>\n<td data-browser-name=\"Safari\" class=\"yep\">3.1 <\/td>\n<td data-browser-name=\"Firefox\" class=\"yep\">All <\/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\">All <\/td>\n<td data-browser-name=\"iOS\" class=\"yep\">All <\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>The :disabled pseudo-class selector provides conditional styling to HTML elements that can receive user input, when the elements have the disabled attribute. It is defined in the CSS Selectors Level 3 spec as a \u201cUI element state pseudo-class\u201d, meaning it is used to style content based on the user&#8217;s interaction with an input element. Elements [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":14168,"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":166069,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/r\/read-write-read\/","url_meta":{"origin":14172,"position":0},"title":":read-write \/ :read-only","date":"March 17, 2014","format":false,"excerpt":"The :read-write and :read-only selectors are two mutability pseudo-classes aiming at making form styling easier based on disabled, readonly and contenteditable HTML Attributes. While the browser support is not that bad, the various implementations are quite wonky. According to the official CSS Specifications, a :read-write selector will match an element\u2026","rel":"","context":"In \":read-only\"","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":14172,"position":1},"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":14180,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/e\/enabled\/","url_meta":{"origin":14172,"position":2},"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":14267,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/r\/required\/","url_meta":{"origin":14172,"position":3},"title":":required","date":"September 6, 2011","format":false,"excerpt":"The :required pseudo class selector in CSS allows authors to select and style any matched element with the required attribute. Forms can easily indicate which fields must have valid data before the form can be submitted, but allows the user to avoid the wait incurred by having the server be\u2026","rel":"","context":"With 12 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14919,"url":"https:\/\/css-tricks.com\/snippets\/css\/nested-expandable-folders\/","url_meta":{"origin":14172,"position":4},"title":"Nested &#038; Expandable Folders","date":"November 13, 2011","format":false,"excerpt":"This was a demo originally by Martin Ivanov, utilizing hidden checkboxes and adjacent sibling combinators to set the \"state\" of each folder. The live demo has since fallen off of the internet, so I'll post a copy of it here, with the original code below it. See the Pen Nested\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":375761,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/h\/has\/","url_meta":{"origin":14172,"position":5},"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":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14172"}],"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=14172"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14172\/revisions"}],"predecessor-version":[{"id":199107,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14172\/revisions\/199107"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14168"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14172"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}