{"id":335874,"date":"2021-03-08T08:03:44","date_gmt":"2021-03-08T16:03:44","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=335874"},"modified":"2021-03-08T08:04:34","modified_gmt":"2021-03-08T16:04:34","slug":"form-validation-styling-on-input-focus","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/css\/form-validation-styling-on-input-focus\/","title":{"rendered":"Form Validation Styling on Input Focus"},"content":{"rendered":"\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Only show invalid ring while not focused *\/\ninput:not(:focus):not(:placeholder-shown):invalid {\n  border-color: var(--color-invalid);\n}\ninput:not(:focus):not(:placeholder-shown):invalid ~ .error-message {\n  display: block;\t\n}\n\n\/* Only show valid ring while not focused and if a value is entered *\/\n\/* :empty won't work here as that targets elements that have no childeren. Therefore we abuse :placeholder-shown *\/\ninput:not(:focus):not(:placeholder-shown):valid {\n  border-color: var(--color-valid);\n}<\/code><\/pre>\n\n\n\n<p>Pulling this straight from the Weekly Platform News, where \u0160ime Vidas covers <a href=\"https:\/\/css-tricks.com\/weekly-platform-news-focus-rings-donut-scope-ditching-em-units-and-global-privacy-control\/#a-new-push-to-bring-css-user-invalid-to-browsers\">two long ongoing issues<\/a> with using <code>:invalid<\/code> to style form input validation. Apparently, what happens is&#8230;<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large\"><ul><li>[inputs] become <code>:invalid<\/code> while the user is still typing the value.<\/li><li>If a form field is required (<code<input required><\/code>), it will become <code>:invalid<\/code> immediately on page load.<\/li><\/ul><p>Both of these behaviors are potentially confusing (and <a href=\"https:\/\/twitter.com\/ryanflorence\/status\/1354502174332444673\" rel=\"noopener\">annoying<\/a>), so websites cannot rely solely on the <code>:invalid<\/code> selector to indicate that a value entered by the user is not valid. However, there is the option to <a href=\"https:\/\/www.bram.us\/2021\/01\/28\/form-validation-you-want-notfocusinvalid-not-invalid\/\" rel=\"noopener\">combine<\/a> <code>:invalid<\/code> with <code>:not(:focus)<\/code> and even <code>:not(:placeholder-shown)<\/code> to ensure that the page\u2019s \u201cinvalid\u201d styles do not apply to the <code>\uff1cinput\uff1e<\/code> until the user has finished entering the value and moved focus to another element.<\/p><\/blockquote>\n\n\n\n<p>Ryan Florence sums this up nicely in a tweet:<\/p>\n\n\n\n<blockquote class=\"twitter-tweet\"><p lang=\"en\" dir=\"ltr\">I prefer when forms wait for blur before freaking out &#x1f928; <a href=\"https:\/\/t.co\/aLKVovpCao\">pic.twitter.com\/aLKVovpCao<\/a><\/p>\u2014 Ryan Florence (@ryanflorence) <a href=\"https:\/\/twitter.com\/ryanflorence\/status\/1354502174332444673?ref_src=twsrc%5Etfw\" rel=\"noopener\">January 27, 2021<\/a><\/blockquote> <script async=\"\" src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n\n\n\n<p>So, what this snippet does is enhance <code>:invalid<\/code> by combining it with <code>:not(:focus)<\/code> and <code>:not(:placeholder-shown)<\/code>.<\/p>\n\n\n\n<p>What does that mean? Let&#8217;s translate the code into something more readable.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">input:not(:focus):not(:placeholder-shown):invalid {}<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p>If an input is not in focus, its placeholder text isn&#8217;t shown, and the entered text is invalid&#8230; then you can use these styles.<\/p><\/blockquote>\n\n\n\n<p>In other words, this prevents the invalid style from being applied until text is entered and focus moves to another element.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">input:not(:focus):not(:placeholder-shown):invalid ~ .error-message<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p>Hey, let&#8217;s display the error message if those same conditions are met.<\/p><\/blockquote>\n\n\n\n<p>This is the exact same thing as above, but selects an <code>.error-message<\/code> class and sets it from <code>display: none<\/code> to <code>display: block<\/code> only after the text is entered and focus moves from the input to something else.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">input:not(:focus):not(:placeholder-shown):valid<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\"><p>Oh, the text that&#8217;s entered is valid? OK, let&#8217;s apply these styles instead.<\/p><\/blockquote>\n\n\n\n<p>Again, the same sorta condition, but chained to <code>:valid<\/code> instead of <code>:invalid<\/code>. That way, we can give the user a different set of styles to indicate that what they typed is good to go!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ExNYBOK\" src=\"\/\/codepen.io\/anon\/embed\/ExNYBOK?height=450&amp;theme-id=1&amp;slug-hash=ExNYBOK&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ExNYBOK\" title=\"CodePen Embed ExNYBOK\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>According to \u0160ime, this sort of snippet might be unnecessary in the future as a greater push is being made for <code>:user-invalid<\/code> and <code>:user-valid<\/code>. Firefox already <a href=\"https:\/\/groups.google.com\/g\/mozilla.dev.platform\/c\/rEYMl79krS8\/m\/UI_kwzatCAAJ?pli=1\" rel=\"noopener\">intends<\/a> to ship its un-prefixed solution. Tickets are open to do the same in <a href=\"https:\/\/bugs.webkit.org\/show_bug.cgi?id=222267\" rel=\"noopener\">Safari<\/a> and <a href=\"https:\/\/bugs.chromium.org\/p\/chromium\/issues\/detail?id=1156069\" rel=\"noopener\">Chrome<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pulling this straight from the Weekly Platform News, where \u0160ime Vidas covers two long ongoing issues with using :invalid to style form input validation. Apparently, what happens is&#8230; [inputs] become :invalid while the user is still typing the value. If a form field is required (<\/p>\n","protected":false},"author":2508,"featured_media":0,"parent":3222,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-snippet.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":[18904,1506,1499,18903,1262],"acf":[],"jetpack-related-posts":[{"id":252115,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/u\/user-invalid\/","url_meta":{"origin":335874,"position":0},"title":":user-invalid","date":"March 8, 2017","format":false,"excerpt":"The :user-invalid is a CSS pseudo-class that is under proposal in the CSS Selectors Level 4 working draft that selects a form element based on whether the value\u2014as entered by a user\u2014is valid when checked against the what is specified as an accepted value in the HTML markup after the\u2026","rel":"","context":"In \"form validation\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14206,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/i\/invalid\/","url_meta":{"origin":335874,"position":1},"title":":invalid","date":"September 6, 2011","format":false,"excerpt":"The :invalid selector allows you to select elements that do not contain valid content, as determined by its type attribute. :invalid is defined in the CSS Selectors Level 3 spec as a \u201cvalidity pseudo-selector\u201d, meaning it is used to style interactive elements based on an evaluation of user input. This\u2026","rel":"","context":"With 13 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":375761,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/h\/has\/","url_meta":{"origin":335874,"position":2},"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":14285,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/v\/valid\/","url_meta":{"origin":335874,"position":3},"title":":valid","date":"September 6, 2011","format":false,"excerpt":"The :valid selector allows you to select elements that contain valid content, as determined by its type attribute. :valid is defined in the CSS Selectors Level 3 spec as a \u201cvalidity pseudo-selector\u201d, meaning it is used to style interactive elements based on an evaluation of user input. This selector has\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":20834,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/p\/placeholder\/","url_meta":{"origin":335874,"position":4},"title":"::placeholder","date":"March 27, 2013","format":false,"excerpt":"The ::placeholder pseudo element (or a pseudo class, in some cases, depending on the browser implementation) allows you to style the placeholder text of a form element. As in, the text set with the placeholder attribute: <input type=\"email\" placeholder=\"jane@firefly.com\"> You can style that text across most browsers with this smattering\u2026","rel":"","context":"With 53 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":236285,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/p\/placeholder-shown\/","url_meta":{"origin":335874,"position":5},"title":":placeholder-shown","date":"January 6, 2016","format":false,"excerpt":"The\u00a0:placeholder-shown\u00a0pseudo-class selects\u00a0the input element itself\u00a0when placeholder text exists in a form input. Think of it as a nice way to distinguish between inputs that are\u00a0currently showing placeholder text\u00a0versus those that are not. input:placeholder-shown { border: 5px solid red; } CodePen Embed Fallback The idea behind placeholders Text-based\u00a0<input>s and the\u00a0<textarea>\u00a0input can\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/335874"}],"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\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=335874"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/335874\/revisions"}],"predecessor-version":[{"id":335979,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/335874\/revisions\/335979"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3222"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=335874"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=335874"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}