{"id":236285,"date":"2016-01-06T09:09:15","date_gmt":"2016-01-06T16:09:15","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=236285"},"modified":"2020-05-22T15:21:45","modified_gmt":"2020-05-22T22:21:45","slug":"placeholder-shown","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/p\/placeholder-shown\/","title":{"rendered":":placeholder-shown"},"content":{"rendered":"\n<p>The&nbsp;<code>:placeholder-shown<\/code>&nbsp;pseudo-class selects&nbsp;<strong>the input element itself<\/strong>&nbsp;when placeholder text exists in a form input. Think of it as a nice way to distinguish between inputs that are&nbsp;<em>currently showing placeholder text<\/em>&nbsp;versus those that are not.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">input:placeholder-shown {\n  border: 5px solid red;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_NxdJgV\" src=\"\/\/codepen.io\/anon\/embed\/NxdJgV?height=450&amp;theme-id=1&amp;slug-hash=NxdJgV&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed NxdJgV\" title=\"CodePen Embed NxdJgV\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"article-header-id-0\">The idea behind placeholders<\/h3>\n\n\n<p>Text-based&nbsp;<code>&lt;input&gt;<\/code>s and the&nbsp;<code>&lt;textarea&gt;<\/code>&nbsp;input can have placeholder text. It&#8217;s text that is shown when the input is empty, to suggest a possible value. For example, a form asking for a school might have a label for what it&#8217;s asking for, but then suggest &#8220;Forest Hills Example High School&#8221; in the placeholder as an example value:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;label for=\"school\">School Name:&lt;\/label>\n&lt;input placeholder=\"Forest Hills Example High School\" type=\"text\" name=\"school\" id=\"school\"><\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"article-header-id-1\">The difference between <code>:placeholder-shown<\/code> and <code>::placeholder<\/code><\/h3>\n\n\n<p><code>:placeholder-shown<\/code>&nbsp;is for selecting the input itself when it&#8217;s placeholder text is being shown. As opposed to&nbsp;<code>::placeholder<\/code>&nbsp;which styles the placeholder text.<\/p>\n\n\n\n<p>Here&#8217;s a diagram:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/web.archive.org\/web\/20190624214404im_\/https:\/\/css-tricks.com\/wp-content\/uploads\/2016\/01\/the-difference-placeholder.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>I found this highly confusing as:<\/p>\n\n\n\n<ol><li>the specs only have&nbsp;<code>:placeholder-shown<\/code>&nbsp;and not&nbsp;<code>::placeholder<\/code><\/li><li><code>:placeholder-shown<\/code>&nbsp;can still affect the styling of the placeholder text, since it&#8217;s a parent element (e.g. font-size).<\/li><\/ol>\n\n\n\n<p>Note that&nbsp;<code>:placeholder-shown<\/code>&nbsp;is a pseudo-<strong>class<\/strong>&nbsp;(it&#8217;s an element in a particular state) and&nbsp;<code>::placeholder<\/code>&nbsp;is a pseudo-<strong>element<\/strong>&nbsp;(a visible thing that isn&#8217;t really in the DOM). Distinguishable by single-versus-double colons.<\/p>\n\n\n\n<p>Tab Atkins cleared it up for me via email:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><code>:placeholder-shown<\/code>, being a pseudo-class, has to select an existing element. It selects the input whenever you&#8217;re in the placeholder-showing state. The <code>::placeholder<\/code> pseudo-element wraps the actual placeholder text.<\/p><\/blockquote>\n\n\n<h3 class=\"wp-block-heading\" id=\"article-header-id-2\">If you need to style the placeholder text<\/h3>\n\n\n<p>Use\u00a0<code>::placeholder<\/code>\u00a0(actually, use all the crazy vendor prefixes for it) which\u00a0<a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/p\/placeholder\/\">we have detailed in the Almanac here<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"article-header-id-3\">More Information<\/h3>\n\n\n<ul><li><a href=\"https:\/\/www.w3.org\/TR\/selectors4\/#placeholder-shown-pseudo\" rel=\"noopener\">Selectors Level 4 Spec<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser Support<\/h3>\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-placeholder-shown\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">47<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">51<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"IE - \"><span class=\"caniuse-agents-version version\">11*<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">79<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">9<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">9.0-9.2<\/span><\/td><\/tr><\/table><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The&nbsp;:placeholder-shown&nbsp;pseudo-class selects&nbsp;the input element itself&nbsp;when placeholder text exists in a form input. Think of it as a nice way to distinguish between inputs that are&nbsp;currently showing placeholder text&nbsp;versus those that are not. The idea behind placeholders Text-based&nbsp;&lt;input&gt;s and the&nbsp;&lt;textarea&gt;&nbsp;input can have placeholder text. It&#8217;s text that is shown when the input is empty, to suggest [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":0,"parent":14250,"menu_order":0,"comment_status":"closed","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":20834,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/p\/placeholder\/","url_meta":{"origin":236285,"position":0},"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":335874,"url":"https:\/\/css-tricks.com\/snippets\/css\/form-validation-styling-on-input-focus\/","url_meta":{"origin":236285,"position":1},"title":"Form Validation Styling on Input Focus","date":"March 8, 2021","format":false,"excerpt":"\/* Only show invalid ring while not focused *\/ input:not(:focus):not(:placeholder-shown):invalid { border-color: var(--color-invalid); } input:not(:focus):not(:placeholder-shown):invalid ~ .error-message { display: block; } \/* Only show valid ring while not focused and if a value is entered *\/ \/* :empty won't work here as that targets elements that have no childeren. Therefore\u2026","rel":"","context":"In \":invalid\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7431,"url":"https:\/\/css-tricks.com\/snippets\/css\/style-placeholder-text\/","url_meta":{"origin":236285,"position":2},"title":"Style Placeholder Text","date":"September 13, 2010","format":false,"excerpt":"Placeholder text in inputs has (in the browsers implementing it so far) a light gray color. To style it, you'll need vendor prefix CSS properties. ::-webkit-input-placeholder { color: red; } :-moz-placeholder { \/* Firefox 18- *\/ color: red; } ::-moz-placeholder { \/* Firefox 19+ *\/ color: red; } :-ms-input-placeholder {\u2026","rel":"","context":"With 135 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":194408,"url":"https:\/\/css-tricks.com\/snippets\/sass\/extend-wrapper-aka-mixtend\/","url_meta":{"origin":236285,"position":3},"title":"@extend Wrapper aka Mixtend","date":"January 28, 2015","format":false,"excerpt":"When extending a selector with the @extend directive, Sass doesn\u2019t take the CSS content from the extended selector to put it in the extending one. It works the other way around. It takes the extending selector and append it to the extended one. Because of how it works, it makes\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18351,"url":"https:\/\/css-tricks.com\/lodge\/v10\/051-smooth-loading-gallery-part-1\/","url_meta":{"origin":236285,"position":4},"title":"#051: Smooth Loading Gallery, Part 1","date":"September 18, 2012","format":false,"excerpt":"We have the grid layout for the Gallery going. Unfortunately the loading of it is a bit abrupt and wonky. This is because CSS3 columns are designed to split content among each of the columns evenly, but images sometimes take a moment to load and don't have a width\/height to\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18470,"url":"https:\/\/css-tricks.com\/lodge\/v10\/074-cssing-the-footer-part-4\/","url_meta":{"origin":236285,"position":5},"title":"#074: CSSing the Footer, Part 4","date":"September 21, 2012","format":false,"excerpt":"In this final screencast of building out the footer, we work on the bottom footer where the CodePen and ShopTalk areas are. We have to change the HTML a bit as come come to the realization that the four chunks along the bottom (logo, text, logo, text) would make sense\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\/236285"}],"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=236285"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/236285\/revisions"}],"predecessor-version":[{"id":311520,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/236285\/revisions\/311520"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14250"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=236285"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=236285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}