{"id":14174,"date":"2011-09-06T19:56:04","date_gmt":"2011-09-07T02:56:04","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14174"},"modified":"2020-09-28T07:30:51","modified_gmt":"2020-09-28T14:30:51","slug":"default","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/d\/default\/","title":{"rendered":":default"},"content":{"rendered":"<p>The <code>:default<\/code> 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.<\/p>\n<pre><code class=\"language-css\">input[type=\"radio\"]:default + label:after {\n   content: ' (default)';\n   color: #999;\n   font-style: italic;\n}<\/code><\/pre>\n<p>The CSS above targets the label coming immediately after the default selected radio button in a group of radio buttons:<\/p>\n<pre><code><\/code><\/pre>\n<ul>\n<li><input id=\"red\" name=\"colors\" type=\"radio\" value=\"red\"> <label for=\"red\">red<\/label><\/li>\n<li><input id=\"green\" checked=\"checked\" name=\"colors\" type=\"radio\" value=\"green\"> <label for=\"green\">green<\/label><\/li>\n<li><input id=\"blue\" name=\"colors\" type=\"radio\" value=\"blue\"> <label for=\"blue\">blue<\/label><\/li>\n<\/ul>\n<pre><code><\/code><\/pre>\n<p>The green radio button&#8217;s label will be followed by the text &#8220;(default)&#8221; in grey, italic text in supporting browsers.<\/p>\n<ul class=\"overwrite\">\n<li><input id=\"red\" name=\"color\" type=\"radio\" value=\"red\"> <label for=\"red\">red<\/label><\/li>\n<li><input id=\"green\" checked=\"checked\" name=\"color\" type=\"radio\" value=\"green\"> <label for=\"green\">green<\/label><\/li>\n<li><input id=\"blue\" name=\"color\" type=\"radio\" value=\"blue\"> <label for=\"blue\">blue<\/label><\/li>\n<\/ul>\n<p>Examples include the default submit button in a group of buttons, the default option from a popup menu, the radio button that has the <code>checked<\/code> attribute set in the HTML (as seen in supporting browsers), and the checkboxes that are by default checked.<\/p>\n<h3>More Resources<\/h3>\n<ul>\n<li><a href=\"http:\/\/codepen.io\/estelle\/pen\/xuJvh\" rel=\"noopener\">Demo<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/CSS\/:default\" rel=\"noopener\">MDN page on :default<\/a><\/li>\n<li><a href=\"http:\/\/www.w3.org\/TR\/css3-ui\/#pseudo-default\" rel=\"noopener\">W3C CSS3 UI specifications<\/a><\/li>\n<li><a href=\"http:\/\/www.w3.org\/TR\/selectors4\/#the-default-pseudo\" rel=\"noopener\">W3C Selectors Level 4<\/a><\/li>\n<\/ul>\n<h3 id=\"browser-support\">Browser Support<\/h3>\n<p>Different browsers have different levels of support. Firefox provides full support. Webkit browsers support default on buttons but not on radio or checkboxes, and Opera is the inverse, supporting it on radio buttons and checkboxes, but not on the submit.<\/p>\n<ul>\n<li>Opera supports <code>:default<\/code> on checkboxes and radio buttons.<\/li>\n<li>Webkit browsers, including Chrome and Safari, support <code>:default<\/code> on the submit button<\/li>\n<li>Firefox supports <code>:default<\/code> on checkbox, radio AND submit input types.<\/li>\n<li>Internet explorer does not support <code>:default<\/code> on checkbox, radio or submit input types.<\/li>\n<\/ul>\n<table class=\"browser-support-table\">\n<thead>\n<tr>\n<th class=\"chrome\">Chrome<\/th>\n<th class=\"safari\">Safari<\/th>\n<th class=\"firefox\">Firefox<\/th>\n<th class=\"opera\">Opera<\/th>\n<th class=\"ie\">IE<\/th>\n<th class=\"android\">Android<\/th>\n<th class=\"iOS\">iOS<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td class=\"yep\" data-browser-name=\"Chrome\">10<\/td>\n<td class=\"yep\" data-browser-name=\"Safari\">5<\/td>\n<td class=\"yep\" data-browser-name=\"Firefox\">4<\/td>\n<td class=\"yep\" data-browser-name=\"Opera\">10<\/td>\n<td class=\"nope\" data-browser-name=\"IE\">none<\/td>\n<td class=\"nope\" data-browser-name=\"Android\">none<\/td>\n<td class=\"yep\" data-browser-name=\"iOS\">5<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>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=&#8221;radio&#8221;]:default + label:after { content: &#8216; (default)&#8217;; color: #999; font-style: italic; } The CSS above targets the [&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":15146,"url":"https:\/\/css-tricks.com\/snippets\/css\/custom-checkboxes-and-radio-buttons\/","url_meta":{"origin":14174,"position":0},"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":13911,"url":"https:\/\/css-tricks.com\/almanac\/properties\/a\/appearance\/","url_meta":{"origin":14174,"position":1},"title":"appearance","date":"August 31, 2011","format":false,"excerpt":"The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme. .thing { -webkit-appearance: value; -moz-appearance: value; appearance: value; } This is starting to be unprefixed, which is great because the cross-browser story here is very complicated. The appearance property is\u2026","rel":"","context":"In \"appearance\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14166,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/c\/checked\/","url_meta":{"origin":14174,"position":2},"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":14188,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/focus\/","url_meta":{"origin":14174,"position":3},"title":":focus","date":"September 6, 2011","format":false,"excerpt":"The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse. Here is an example: textarea:focus { background: pink; } CodePen Embed Fallback Any element (most commonly\u00a0<input>s and\u00a0<textarea>s) are in \"focus\" when they are selected and ready\u2026","rel":"","context":"With 33 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":249463,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/i\/indeterminate\/","url_meta":{"origin":14174,"position":4},"title":":indeterminate","date":"January 1, 2017","format":false,"excerpt":":indeterminate is a pseudo-class selector in CSS named for a state that is neither checked nor unchecked. It's that in-between state that we might consider the \"Maybe\" between \"Yes\" and \"No\" options. The state is not fully determined, hence the name: indeterminate. Indeterminate Checkboxes The most common place we might\u2026","rel":"","context":"In \"forms\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":376465,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/color-scheme\/","url_meta":{"origin":14174,"position":5},"title":"color-scheme","date":"January 27, 2023","format":false,"excerpt":"You know how we have \u201cdark mode\u201d and \u201clight mode\u201d these days? Browsers also have \"dark\" and \"light\" color schemes baked into their default styles. The CSS color-scheme property lets the browser use (or choose) to display certain elements with its dark or light default styling. :root { color-scheme: light\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\/14174"}],"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=14174"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14174\/revisions"}],"predecessor-version":[{"id":322200,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14174\/revisions\/322200"}],"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=14174"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}