{"id":20834,"date":"2013-03-27T16:17:47","date_gmt":"2013-03-27T23:17:47","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=20834"},"modified":"2021-01-07T08:08:56","modified_gmt":"2021-01-07T16:08:56","slug":"placeholder","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/selectors\/p\/placeholder\/","title":{"rendered":"::placeholder"},"content":{"rendered":"\n<p>The <code>::placeholder<\/code> 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 <code>placeholder<\/code> attribute:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;input type=\"email\" placeholder=\"jane@firefly.com\"><\/code><\/pre>\n\n\n\n<p>You can style that text across most browsers with this smattering of vendor-prefixed selectors:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">::-webkit-input-placeholder { \/* Chrome\/Opera\/Safari *\/\n  color: pink;\n}\n::-moz-placeholder { \/* Firefox 19+ *\/\n  color: pink;\n}\n:-ms-input-placeholder { \/* IE 10+ *\/\n  color: pink;\n}\n:-moz-placeholder { \/* Firefox 18- *\/\n  color: pink;\n}<\/code><\/pre>\n\n\n\n<p class=\"explanation\"><strong>Important warning:<\/strong> this syntax is non-standard, thus all the naming craziness. It doesn&#8217;t appear in the spec at all. <code>:placeholder-shown<\/code> is standard, and even spec authors seem to think <code>::placeholder<\/code> will be the standardized version.<\/p>\n\n\n\n<p>Like any psuedo, you can scope it to specific elements as needed, like:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">input[type=\"email\"].big-dog::-webkit-input-placeholder {\n  color: orange;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"demo\">Demo<\/h3>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qmEoZv\" src=\"\/\/codepen.io\/anon\/embed\/qmEoZv?height=450&amp;theme-id=1&amp;slug-hash=qmEoZv&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qmEoZv\" title=\"CodePen Embed qmEoZv\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-difference-between-placeholdershown-and-placeholder\">The difference between <code>:placeholder-shown<\/code> and <code>::placeholder<\/code><\/h3>\n\n\n<p><code>:placeholder-shown<\/code> is for selecting the input itself when it&#8217;s placeholder text is being shown. As opposed to <code>::placeholder<\/code> 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 align-none media-237171\" id=\"post-237171\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/01\/the-difference-placeholder.png\" 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 <code>:placeholder-shown<\/code> and not <code>::placeholder<\/code><\/li><li><code>:placeholder-shown<\/code> 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 <code>:placeholder-shown<\/code> is a pseudo <strong>class<\/strong> (it&#8217;s an element in a particular state) and <code>::placeholder<\/code> is a pseudo <strong>element<\/strong> (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>:placeholder-shown, being a pseudo-class, has to select an existing element &#8211; it selects the input whenever you&#8217;re in the placeholder-showing state. The ::placeholder pseudo-element wraps the actual placeholder text.<\/p><\/blockquote>\n\n\n<h3 class=\"wp-block-heading\" id=\"element-or-class\">Element or class?<\/h3>\n\n\n<p>This functionality is not standardized. That means that every browser has a different idea on how it should work.<\/p>\n\n\n\n<p>Firefox originally implemented this as a pseudo class, but changed it for <a href=\"http:\/\/lists.w3.org\/Archives\/Public\/www-style\/2013Jan\/0283.html\" rel=\"noopener\">a bunch of reasons<\/a>. To make a long story short, you can&#8217;t do as much with a pseudo class.<\/p>\n\n\n\n<p>For instance, if you want to change the color of the text when the input is focused. You would use a selector like <code>input:focus::placeholder<\/code>, which you wouldn&#8217;t be able to do with a pseudo class (they don\u2019t stack the same way).<\/p>\n\n\n\n<p>IE10 supports this as a pseudo class, rather than an element. Everyone else has implemented a pseudo element.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"firefox-placeholder-color\">Firefox placeholder color<\/h3>\n\n\n<p>You might notice how in Firefox the color of the placeholder looks faded when compared to other browsers. In the image below, Firefox 43 is shown on the left whilst Chrome 47 is shown on the right:<\/p>\n\n\n\n<figure class=\"wp-block-image align-none media-236981\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/01\/placeholders.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\"\/><figcaption>The Chrome version is ideally the style that we\u2019d like to see everywhere.<\/figcaption><\/figure>\n\n\n\n<p>This is because, by default, all placeholders in Firefox have an opacity value applied to them, so in order to fix this we need to reset that value:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">::-moz-placeholder {\n  opacity: 1;\n}<\/code><\/pre>\n\n\n\n<p>You can see more by <a href=\"http:\/\/codepen.io\/team\/css-tricks\/pen\/36c9b95c815e9c96e31d1d28ea6f8224?editors=110\" rel=\"noopener\">testing this demo<\/a> out in Firefox.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"supported-styles\">Supported Styles<\/h3>\n\n\n<p>The pseudo element supports styling of these properties:<\/p>\n\n\n\n<ul><li><code>font<\/code> properties<\/li><li><code>color<\/code><\/li><li><code>background<\/code> properties<\/li><li><code>word-spacing<\/code><\/li><li><code>letter-spacing<\/code><\/li><li><code>text-decoration<\/code><\/li><li><code>vertical-align<\/code><\/li><li><code>text-transform<\/code><\/li><li><code>line-height<\/code><\/li><li><code>text-indent<\/code><\/li><li><code>opacity<\/code><\/li><\/ul>\n\n\n\n<p>The pseudo class supports most (if not all) of these properties as well, but isn&#8217;t as flexible for the reasons outlined above.<\/p>\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\" 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\">57<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">19*<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/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\">10.1<\/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\">10.3<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"other-resources\">Other resources<\/h3>\n\n\n<ul><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/CSS\/:-moz-placeholder\" rel=\"noopener\">MDN Docs<\/a><\/li><li><a href=\"http:\/\/blog.teamtreehouse.com\/the-css3-placeholder-pseudo-element\" rel=\"noopener\">&#8220;The CSS3 Placeholder Pseudo-element&#8221;<\/a> by Guil Hernandez<\/li><li><a href=\"http:\/\/lists.w3.org\/Archives\/Public\/www-style\/2013Jan\/0283.html\" rel=\"noopener\">&#8220;Styling HTML placeholder attribute&#8221;<\/a> by Mounir Lamouri<\/li><li><a href=\"http:\/\/wiki.csswg.org\/ideas\/placeholder-styling\" rel=\"noopener\">&#8220;Styling Placeholders&#8221;<\/a> by Tab Atkins<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-related-properties\">Related properties<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card \" id=\"mini-post-20834\">\n\n  <time datetime=\"2016-01-06\" title=\"Originally published Mar 27, 2013\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    May 22, 2020  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/p\/placeholder-shown\/\">\n      :placeholder-shown    <\/a>\n  <\/h3>\n\n      <a href=\"https:\/\/css-tricks.com\/almanac\/selectors\/p\/placeholder-shown\/\" class=\"almanac-example\">\n      <code class=\"language-css\">input:placeholder-shown { border: 5px solid red; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\" aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\">\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>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: You can style that text across most browsers with this smattering of vendor-prefixed selectors: Important warning: this syntax is [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":14250,"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":236285,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/p\/placeholder-shown\/","url_meta":{"origin":20834,"position":0},"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":[]},{"id":7431,"url":"https:\/\/css-tricks.com\/snippets\/css\/style-placeholder-text\/","url_meta":{"origin":20834,"position":1},"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":20834,"position":2},"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":335874,"url":"https:\/\/css-tricks.com\/snippets\/css\/form-validation-styling-on-input-focus\/","url_meta":{"origin":20834,"position":3},"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":372892,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/file-selector-button\/","url_meta":{"origin":20834,"position":4},"title":"::file-selector-button","date":"August 30, 2022","format":false,"excerpt":"The ::file-selector-button in CSS is a pseudo-element that selects <input type=\"file\"> in HTML. input::file-selector-button { background-color: #f8a100; } You've undoubtedly come across file upload inputs \u2014 they're very common, especially for including file attachments in a form, like a PDF or image. CodePen Embed Fallback Syntax selector::file-selector-button { } You\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":6855,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/test-if-element-supports-attribute\/","url_meta":{"origin":20834,"position":5},"title":"Test if Element Supports Attribute","date":"July 16, 2010","format":false,"excerpt":"Not all browsers support all attributes on all elements. There are a number of new attributes in HTML5, so the idea of testing to see what kind of browser environment you are in becomes every increasingly important. function elementSupportsAttribute(element, attribute) { var test = document.createElement(element); if (attribute in test) {\u2026","rel":"","context":"With 13 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/20834"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=20834"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/20834\/revisions"}],"predecessor-version":[{"id":332399,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/20834\/revisions\/332399"}],"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=20834"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=20834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}