StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h2>Implementation</h2> <p>There are three different implementations: pseudo-elements, pseudo-classes, and nothing.</p> <ul> <li>WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element: <code>::-webkit-input-placeholder</code>. <sup>[<a href="https://bugs.webkit.org/show_bug.cgi?id=21227" rel="noreferrer">Ref</a>]</sup></li> <li>Mozilla Firefox 4 to 18 is using a pseudo-class: <code>:-moz-placeholder</code> (<em>one</em> colon). <sup>[<a href="https://developer.mozilla.org/en/CSS/:-moz-placeholder" rel="noreferrer">Ref</a>]</sup></li> <li>Mozilla Firefox 19+ is using a pseudo-element: <code>::-moz-placeholder</code>, but the old selector will still work for a while. <sup>[<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3A-moz-placeholder" rel="noreferrer">Ref</a>]</sup></li> <li>Internet Explorer 10 and 11 are using a pseudo-class: <code>:-ms-input-placeholder</code>. <sup>[<a href="http://msdn.microsoft.com/en-us/library/ie/hh772745(v=vs.85).aspx" rel="noreferrer">Ref</a>]</sup></li> <li>April 2017: <strong>Most modern browsers support the simple pseudo-element <code>::placeholder</code> <sup>[<a href="https://caniuse.com/#feat=css-placeholder" rel="noreferrer">Ref</a>]</sup></strong></li> </ul> <p>Internet Explorer 9 and lower does not support the <code>placeholder</code> attribute at all, while <a href="http://web.archive.org/web/20131206060908/http://my.opera.com/community/forums/topic.dml?id=841252&t=1296553904&page=1#comment8072202" rel="noreferrer">Opera 12 and lower do not support</a> any CSS selector for placeholders.</p> <p>The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the <a href="http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/" rel="noreferrer">Shadow DOM</a>. A <code>padding</code> on an <code>input</code> will not get the same background color as the pseudo-element.</p> <h2>CSS selectors</h2> <p>User agents are required to ignore a rule with an unknown selector. See <a href="http://www.w3.org/TR/selectors/#Conformance" rel="noreferrer">Selectors Level 3</a>:</p> <blockquote> <p>a <a href="http://www.w3.org/TR/selectors/#grouping" rel="noreferrer">group</a> of selectors containing an invalid selector is invalid.</p> </blockquote> <p>So we need separate rules for each browser. Otherwise the whole group would be ignored by all browsers. <div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #909; opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #909; opacity: 1; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #909; } ::-ms-input-placeholder { /* Microsoft Edge */ color: #909; } ::placeholder { /* Most modern browsers support this now. */ color: #909; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><input placeholder="Stack Snippets are awesome!"></code></pre> </div> </div> </p> <h2>Usage notes</h2> <ul> <li>Be careful to avoid bad contrasts. Firefox's placeholder appears to be defaulting with a reduced opacity, so needs to use <code>opacity: 1</code> here.</li> <li>Note that placeholder text is just cut off if it doesn’t fit – size your input elements in <code>em</code> and test them with big minimum font size settings. Don’t forget translations: some languages <a href="http://www.w3.org/International/articles/article-text-size.en" rel="noreferrer">need more room</a> for the same word. </li> <li>Browsers with HTML support for <code>placeholder</code> but without CSS support for that (like Opera) should be tested too.</li> <li>Some browsers use additional default CSS for some <code>input</code> types (<code>email</code>, <code>search</code>). These might affect the rendering in unexpected ways. Use the <a href="https://developer.mozilla.org/en-US/docs/CSS/-moz-appearance" rel="noreferrer">properties</a> <code>-webkit-appearance</code> and <code>-moz-appearance</code> to change that. Example:</li> </ul> <pre class="lang-css prettyprint-override"><code> [type="search"] { -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload