{"id":14246,"date":"2011-09-06T20:26:20","date_gmt":"2011-09-07T03:26:20","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14246"},"modified":"2021-08-04T10:30:22","modified_gmt":"2021-08-04T17:30:22","slug":"optional","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/o\/optional\/","title":{"rendered":":optional"},"content":{"rendered":"\n<p>The&nbsp;<code>:optional<\/code>&nbsp;pseudo class targets inputs (including&nbsp;<code>&lt;select&gt;<\/code>s) that are not specifically set as&nbsp;<code>required<\/code>&nbsp;(do not have the&nbsp;<code>required<\/code>&nbsp;attribute).<\/p>\n\n\n\n<p>This can be useful when you want to give optional fields a specific look, maybe slightly less visible than required ones.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"syntax\"><a href=https://css-tricks.com/"#syntax\"><\/a>Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">input[type=text]:optional {\n  border: 1px solid #eee;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"demo\"><a href=https://css-tricks.com/"#demo\"><\/a>Demo<\/h3>\n\n\n<p>In the following demo, optional field (\u201cName\u201d, \u201cGender\u201d and \u201cContinent\u201d) have their opacity lowered to 40% so users can immediately know what are the required fields. In this case, \u201cEmail\u201d. When hovered, an optional input will see the opacity go back to 100%.<\/p>\n\n\n\n<p>The\u00a0<code>optional<\/code>\u00a0works on all type of form elements: text inputs of all types, radio buttons, checkboxes, and selects.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_c5b319686f8e266a791cf7be30c0ccd7\" src=https://css-tricks.com/"////codepen.io//anon//embed//c5b319686f8e266a791cf7be30c0ccd7?height=450&amp;theme-id=1&amp;slug-hash=c5b319686f8e266a791cf7be30c0ccd7&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed c5b319686f8e266a791cf7be30c0ccd7\" title=\"CodePen Embed c5b319686f8e266a791cf7be30c0ccd7\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"is-style-explanation\"><strong>Note: <\/strong>You cannot know with CSS only that a label is associated with an optional field, unless in the label comes after the input (and you use a sibling combinator), which is rare and usually not a good idea. Perhaps in the future parent selectors can help with this.\u00a0<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\"><a href=https://css-tricks.com/"#browser-support\"><\/a>Browser support<\/h3>\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Chrome<\/th><th>Safari<\/th><th>Firefox<\/th><th>Opera<\/th><th>IE<\/th><th>Android<\/th><th>iOS<\/th><\/tr><\/thead><tbody><tr><td>10+<\/td><td>5+<\/td><td>4+<\/td><td>10+<\/td><td>10+<\/td><td>Any<\/td><td>5+&nbsp;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Note that&nbsp;<code>:optional<\/code>&nbsp;isn\u2019t the exact oposite of&nbsp;<code>:not(:required)<\/code>&nbsp;because the latter will match all types of elements while&nbsp;<code>:optional<\/code>&nbsp;is restricted to the form elements.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\"><a href=https://css-tricks.com/"#other-resources\"><\/a>More information<\/h3>\n\n\n<ul><li><a href=https://css-tricks.com/"https:////drafts.csswg.org//selectors//#opt-pseudos\" rel=\"noopener\">Selectors Level 4<\/a><\/li><li><a href=https://css-tricks.com/"https:////developer.mozilla.org//en-US//docs//Web//CSS//:optional/" rel=\"noopener\"> MDN documentation<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The&nbsp;:optional&nbsp;pseudo class targets inputs (including&nbsp;&lt;select&gt;s) that are not specifically set as&nbsp;required&nbsp;(do not have the&nbsp;required&nbsp;attribute). This can be useful when you [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":14240,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_acf_changed":false,"_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":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14246"}],"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=14246"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14246\/revisions"}],"predecessor-version":[{"id":346120,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14246\/revisions\/346120"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14240"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14246"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}