{"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=\"#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=\"#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=\"\/\/codepen.io\/anon\/embed\/c5b319686f8e266a791cf7be30c0ccd7?height=450&amp;theme-id=1&amp;slug-hash=c5b319686f8e266a791cf7be30c0ccd7&amp;default-tab=result\" 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=\"#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=\"#other-resources\"><\/a>More information<\/h3>\n\n\n<ul><li><a href=\"https:\/\/drafts.csswg.org\/selectors\/#opt-pseudos\" rel=\"noopener\">Selectors Level 4<\/a><\/li><li><a href=\"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 want to give optional fields a specific look, maybe slightly less visible than required ones. Syntax Demo In the following demo, optional field (\u201cName\u201d, \u201cGender\u201d and \u201cContinent\u201d) have their opacity lowered to 40% so users [&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":{"_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":14267,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/r\/required\/","url_meta":{"origin":14246,"position":0},"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":243955,"url":"https:\/\/css-tricks.com\/snippets\/sass\/viewport-sized-typography-minimum-maximum-sizes\/","url_meta":{"origin":14246,"position":1},"title":"Viewport Sized Typography with Minimum and Maximum Sizes","date":"July 28, 2016","format":false,"excerpt":"Declaring font sizes in viewport units can produce really interesting results, but it does come with challenges. There are no min-font-size or max-font-size properties in CSS, so edge cases where text gets too small or too big are difficult to deal with. This Sass mixin makes use of media queries\u2026","rel":"","context":"With 12 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":20644,"url":"https:\/\/css-tricks.com\/video-screencasts\/121-the-right-cms-is-a-customized-one\/","url_meta":{"origin":14246,"position":2},"title":"#121: The Right CMS is a Customized One","date":"March 18, 2013","format":false,"excerpt":"The perfect CMS to suite the needs of any non-trivial content-oriented website does not come out-of-the-box. They require customization. For instance, a feature article for a news site isn't just a title and content anymore. It's a title, optional subtitle, alternate short title, blurb, full content, related articles, featured image,\u2026","rel":"","context":"With 54 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":375796,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image-slice\/","url_meta":{"origin":14246,"position":3},"title":"border-image-slice","date":"December 20, 2022","format":false,"excerpt":"The CSS border-image-slice tells the browser where to \u201cslice\u201d an image being used to create the pieces of an element\u2019s borders. .element { border-style: ridge; border-width: 3rem; border-image-source: url('path\/to\/image.jpg'); border-image-slice: 30%; border-image-repeat: repeat; } The border-image-slice property is defined in the CSS Backgrounds and Borders Module Level 3 specification. When\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":13974,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/box-shadow\/","url_meta":{"origin":14246,"position":4},"title":"box-shadow","date":"August 31, 2011","format":false,"excerpt":"The box-shadow property in CSS is for putting shadows on elements (sometimes referred to as \"drop shadows\", ala Photoshop\/Figma). .card { box-shadow: 0 3px 10px rgb(0 0 0 \/ 0.2); } That syntax is: box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color]; The horizontal offset (required) of\u2026","rel":"","context":"In \"box-shadow\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":150360,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/12-callback-functions\/","url_meta":{"origin":14246,"position":5},"title":"#12: Callback Functions","date":"September 19, 2013","format":false,"excerpt":"Everybody's favorite: concept video time! Callbacks are an important concept in JavaScript. They are functions that are called when an action has completed running. Then lend structure and timing to our code. Take for example the animation we used in the last video. Animations take time to run. What if\u2026","rel":"","context":"With 12 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_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}]}}