Как изменить текст placeholder css

CSS псевдоэлемент ::placeholder представляет собой текст placeholder (en-US) в или

(en-US) элементах.</div>
                        <div class="entry-meta">
                <span class="b-share b-share--small">

</span>            </div>
                    </header>

<div id="yandex_rtb_R-A-6935943-3" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-3",
                renderTo: "yandex_rtb_R-A-6935943-3",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>
<div>
<div>
<article>
<div>
<p>CSS псевдоэлемент <strong><code>::placeholder</code></strong> представляет собой текст placeholder <small>(en-US)<small></small></small> в <code><input></code> или <code><textarea></code> <small>(en-US)</small> элементах.</p>
<div>
<pre><code><span>::placeholder</span> <span>{</span>
  <span>color</span><span>:</span> blue<span>;</span>
  <span>font-size</span><span>:</span> 1.5em<span>;</span>
<span>}</span>
</code></pre>
</div>
<p>В <code>::placeholder</code> можно использовать только те CSS-свойства, которые разрешены в псевдоэлементе <code>::first-line</code>.</p>
<p><strong>Примечание:</strong> В большинстве браузеров по умолчанию placeholder выглядит как полупрозрачный или светло-серый текст.</p>
</div>
<section>
<h2>Синтаксис</h2>
<p>Error: could not find syntax for this item</p>
</section>
<section>
<h2>Примеры</h2>
</section>
<section>
<h3>Красный текст</h3>
<div>
<h4>HTML</h4>
<div>
<pre><code><span><span><span><</span>input</span> <span>placeholder</span><span><span>=</span><span>"</span>Введите что-нибудь!<span>"</span></span><span>></span></span>
</code></pre>
</div>
<h4>CSS</h4>
<div>
<pre><code><span>input::placeholder</span> <span>{</span>
  <span>color</span><span>:</span> red<span>;</span>
  <span>font-size</span><span>:</span> 1.2em<span>;</span>
  <span>font-style</span><span>:</span> italic<span>;</span>
<span>}</span>
</code></pre>
</div>
<h4>Результат</h4>
</div>
</section>
<section>
<h3>Зелёный текст</h3>
<div>
<h4>HTML</h4>
<div>
<pre><code><span><span><span><</span>input</span> <span>placeholder</span><span><span>=</span><span>"</span>Введите что-нибудь...<span>"</span></span><span>></span></span>
</code></pre>
</div>
<h4>CSS</h4>
<div>
<pre><code><span>input::placeholder</span> <span>{</span>
  <span>color</span><span>:</span> green<span>;</span>
<span>}</span>
</code></pre>
</div>
<h4>Результат</h4>
</div>
</section>
<section>
<h2>Проблемы доступности</h2>
</section>
<section>
<h3>Цветовой контраст</h3>
<div>
<h4>Контрастность</h4>
<p>Текст placeholder обычно имеет более светлую расцветку и содержит информацию о том, какие введённые данные будут допустимы, но при этом не является текущими введёнными данными.</p>
<p>Важно обеспечить достаточный цветовой контраст между placeholder и фоном, чтобы люди со слабым зрением могли его прочитать, но при этом должна быть достаточная разница между введённым текстом и текстом placeholder, чтобы пользователь не путал их.</p>
<p>Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.</p>

<div class="quads-location quads-ad193929 " id="quads-ad193929" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-5" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-5",
                renderTo: "yandex_rtb_R-A-6935943-5",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<ul>
<li>WebAIM: Color Contrast Checker</li>
<li>MDN Understanding WCAG, Guideline 1.4 explanations</li>
<li>Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</li>
</ul>
<h4>Использование</h4>
<p>Текст placeholder с высоким цветовым контрастом может быть воспринят как введённые данные. Текст placeholder исчезает, когда пользователь вводит что-либо в <code><input></code> элемент. Эти обстоятельства могут помешать заполнить правильно форму, особенно людям с когнитивными проблемами.</p>
<p>Другой подход к представлению информации placeholder заключается в том, чтобы расположить её вне формы ввода в непосредственной близости от неё, а затем использовать <code>aria-describedby</code> для программного связывания <code><input></code> элемента с подсказкой.</p>
<p>В таком случае содержимое подсказки будет доступно даже в том случае, если что-то введено в форму. Большинство скринридеров используют <code>aria-describedby</code> для чтения подсказок после того, как будет прочитан текст метки формы. Пользователь может отключить эту функцию, если дополнительная информация окажется ему ненужной.</p>
<div>
<pre><code><span><span><span><</span>label</span> <span>for</span><span><span>=</span><span>"</span>user-email<span>"</span></span><span>></span></span>Ваш email адрес<span><span><span></</span>label</span><span>></span></span>
<span><span><span><</span>span</span> <span>id</span><span><span>=</span><span>"</span>user-email-hint<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>input-hint<span>"</span></span><span>></span></span>Пример: jane@sample.com<span><span><span></</span>span</span><span>></span></span>
<span><span><span><</span>input</span> <span>id</span><span><span>=</span><span>"</span>user-email<span>"</span></span> <span>aria-describedby</span><span><span>=</span><span>"</span>user-email-hint<span>"</span></span> <span>name</span><span><span>=</span><span>"</span>email<span>"</span></span> <span>type</span><span><span>=</span><span>"</span>email<span>"</span></span><span>></span></span>
</code></pre>
</div>
<ul>
<li>Placeholders in Form Fields Are Harmful — Nielsen Norman Group</li>
</ul>
</div>
</section>
<section>
<h3>Режим высокой контрастности Windows</h3>
<div>
<p>Текст placeholder будет отображаться с теми же стилями, что и введённый пользователем текст при работе в режиме высокой контрастности Windows <small>(en-US)<small></small></small>. Это вызовет затруднения с определением того какой текст был введён, а какой является placeholder.</p>
<ul>
<li>Greg Whitworth — How to use -ms-high-contrast</li>
</ul>
</div>
</section>
<section>
<h3>Метки</h3>
<div>
<p>Placeholder не является заменой элемента <code><label></code>. Без метки, которая программно связывается с формой с помощью <code>for</code> и <code>id</code> атрибутов, такие программы, как скринридеры не смогут анализировать элементы <code><input></code>.</p>
<ul>
<li>MDN Basic form hints <small>(en-US)<small></small></small></li>
<li>Placeholders in Form Fields Are Harmful — Nielsen Norman Group</li>
</ul>
</div>
</section>
<h2>Спецификации</h2>
<table>
<thead>
<tr>
<th>Specification</th>
</tr>
</thead>
<tbody>
<tr>
<td>CSS Pseudo-Elements Module Level 4 <br /><small># placeholder-pseudo</small></td>
</tr>
</tbody>
</table>
<h2>Совместимость с браузерами</h2>
<p>BCD tables only load in the browser</p>
<section>
<h2>Смотрите также</h2>
<div>
<ul>
<li>Псевдокласс <code>:placeholder-shown</code>, который позволяет применять стили к элементу с <strong>активным</strong> placeholder.</li>
<li>Связанные HTML-элементы: <code><input></code>, <code><textarea></code> <small>(en-US)</small></li>
<li>HTML-формы</li>
</ul>
</div>
</section>
</article>
</div>
</div>
<div class="source-url"><a href="https://developer.mozilla.org/ru/docs/Web/CSS/::placeholder" rel="noopener" target="_blank">Источник</a></div>
<div>
<div>
<div>
<div>
<p>Chrome supports the placeholder attribute on <code>input[type=text]</code> elements (others probably do too).</p>

<div class="quads-location quads-ad193930 " id="quads-ad193930" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-6" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-6",
                renderTo: "yandex_rtb_R-A-6935943-6",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<p>But the following CSS doesn’t do anything to the placeholder’s value:</p>
<div>
<pre><code>input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}</code></pre>
<pre><code><input type="text" placeholder="Value"></code></pre>
</div>
<p>But <code>Value</code> will still remain <code>grey</code> instead of <code>red</code>.</p>
<p><strong>Is there a way to change the color of the placeholder text?</strong></p>
</div>
<p><span>8</span></p>
</div>
<div>
<div>
<div>
<div>
<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>[Ref]</sup></li>
<li>Mozilla Firefox 4 to 18 is using a pseudo-class: <code>:-moz-placeholder</code> (<em>one</em> colon). <sup>[Ref]</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>[Ref]</sup></li>
<li>Internet Explorer 10 and 11 are using a pseudo-class: <code>:-ms-input-placeholder</code>. <sup>[Ref]</sup></li>
<li>April 2017: <strong>Most modern browsers support the simple pseudo-element <code>::placeholder</code> <sup>[Ref]</sup></strong></li>
</ul>
<p>Internet Explorer 9 and lower does not support the <code>placeholder</code> attribute at all, while Opera 12 and lower do not support 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 Shadow DOM. 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 Selectors Level 3:</p>
<blockquote>
<p>a group 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.
</p>
<div>
<pre><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><code><input placeholder="Stack Snippets are awesome!"></code></pre>
</div>
<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 need more room 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>Placeholders are no replacement for labels, so make sure you have a label, 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 properties <code>-webkit-appearance</code> and <code>-moz-appearance</code> to change that. Example:</li>
</ul>
<pre><code>    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }
</code></pre>
</p>

<div class="quads-location quads-ad193931 " id="quads-ad193931" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-7" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-7",
                renderTo: "yandex_rtb_R-A-6935943-7",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>
</div>
<div>
<div>
<div>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3C/svg%3E" alt="Andy's user avatar" width="32" height="32" data-lazy-src="https://www.gravatar.com/avatar/43170c54502dcfebd4c8fb32fb4748d3?s=64&d=identicon&r=PG" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://www.gravatar.com/avatar/43170c54502dcfebd4c8fb32fb4748d3?s=64&d=identicon&r=PG" alt="Andy's user avatar" width="32" height="32" /></noscript></p>
</div>
<div>
<p>Andy</p>
<p><span>4,080</span><span>2 gold badges</span><span>24 silver badges</span><span>47 bronze badges</span>
        </p>
</div>
</div>
<div>
<p>
        answered <span>Apr 9, 2010 at 20:36</span>
    </p>
<div>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3C/svg%3E" alt="fuxia's user avatar" width="32" height="32" data-lazy-src="https://i.stack.imgur.com/TBdkD.png?s=64&g=1" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://i.stack.imgur.com/TBdkD.png?s=64&g=1" alt="fuxia's user avatar" width="32" height="32" /></noscript></p>
</div>
</div></div>
</div>
<p><span>0</span></p>
</div>
<div>
<div>
<div>
<pre><code>/* do not group these rules */
*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
    opacity: 1;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
    opacity: 1;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}
*::-ms-input-placeholder {
    /* Microsoft Edge */
    color: red;
}
*::placeholder {
    /* modern browser */
    color: red;
}</code></pre>
<pre><code><input placeholder="hello"/> <br />
<textarea placeholder="hello"></textarea></code></pre>
</div>
<p>This will style all <code>input</code> and <code>textarea</code> placeholders.</p>
<p><strong>Important Note:</strong> Do not group these rules. Instead, make a separate rule for every selector (one invalid selector in a group makes the whole group invalid).</p>
</div>
<p><span>0</span></p>
</div>
<div>
<div>
<p>You may also want to style textareas:</p>

<div class="quads-location quads-ad193932 " id="quads-ad193932" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-8" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-8",
                renderTo: "yandex_rtb_R-A-6935943-8",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<div>
<pre><code>input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #FF9900;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #FF9900;
}</code></pre>
<pre><code><textarea rows="4" cols="50" placeholder="Stack Snippets are nice!">
</textarea></code></pre>
</div></div>
<p><span>0</span></p>
</div>
<div>
<div>
<div>
<p>For Bootstrap and Less users, there is a mixin .placeholder:</p>
<pre><code>// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }
}
</code></pre>
</p></div>
<div>
<div>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3C/svg%3E" alt="Peter Mortensen's user avatar" width="32" height="32" data-lazy-src="https://i.stack.imgur.com/RIZKi.png?s=64&g=1" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://i.stack.imgur.com/RIZKi.png?s=64&g=1" alt="Peter Mortensen's user avatar" width="32" height="32" /></noscript></p>
</div>
<div>
<p>
        answered <span>Jun 6, 2013 at 8:47</span>
    </p>
<div>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3C/svg%3E" alt="EIIPII's user avatar" width="32" height="32" data-lazy-src="https://www.gravatar.com/avatar/d71e746bb692177ea044cc9e305adc70?s=64&d=identicon&r=PG" /><noscript><img loading="lazy" decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://www.gravatar.com/avatar/d71e746bb692177ea044cc9e305adc70?s=64&d=identicon&r=PG" alt="EIIPII's user avatar" width="32" height="32" /></noscript></p>
</div>
<div>
<p>EIIPII<span>EIIPII</span></p>
<p><span>1,771</span><span>1 gold badge</span><span>17 silver badges</span><span>10 bronze badges</span>
        </p>
</div>
</div></div>
</div>
<p><span>1</span></p>
</div>
<div>
<div>
<p>In addition to toscho’s answer I’ve noticed some webkit inconsistencies between Chrome 9-10 and Safari 5 with the CSS properties supported that are worth noting.</p>

<div class="quads-location quads-ad193933 " id="quads-ad193933" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-9" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-9",
                renderTo: "yandex_rtb_R-A-6935943-9",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<p>Specifically Chrome 9 and 10 do not support <code>background-color</code>, <code>border</code>, <code>text-decoration</code> and <code>text-transform</code> when styling the placeholder.</p>
<p>The full cross-browser comparison is here.</p>
</div>
<div>
<p>
        answered <span>Feb 9, 2011 at 16:44</span>
    </p>
<div>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3C/svg%3E" alt="ajcw's user avatar" width="32" height="32" data-lazy-src="https://www.gravatar.com/avatar/4756bd54397d649cf8f314c8d5b39930?s=64&d=identicon&r=PG" /><noscript><img loading="lazy" decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://www.gravatar.com/avatar/4756bd54397d649cf8f314c8d5b39930?s=64&d=identicon&r=PG" alt="ajcw's user avatar" width="32" height="32" /></noscript></p>
</div>
<div>
<p>ajcw<span>ajcw</span></p>
<p><span>23.5k</span><span>6 gold badges</span><span>29 silver badges</span><span>47 bronze badges</span>
        </p>
</div>
</div>
</div>
<div>
<div>
<p>For Sass users:</p>
<pre><code>// Create placeholder mixin
@mixin placeholder($color, $size:"") {
  &::-webkit-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &::-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-ms-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
}

// Use placeholder mixin (the size parameter is optional)
[placeholder] {
  @include placeholder(red, 10px);
}
</code></pre>
</p></div>
<p><span>0</span></p>
</div>
<div>
<div>
<div>
<p>This will work fine. <strong>DEMO HERE:</strong></p>

<div class="quads-location quads-ad193934 " id="quads-ad193934" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-10" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-10",
                renderTo: "yandex_rtb_R-A-6935943-10",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<div>
<pre><code>input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #666;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #666;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #666;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #666;
}</code></pre>
<pre><code><input type="text" placeholder="Value" /></code></pre>
</div></div>
<div>
<p>
        answered <span>Sep 14, 2013 at 12:52</span>
    </p>
<div>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3C/svg%3E" alt="Love Trivedi's user avatar" width="32" height="32" data-lazy-src="https://www.gravatar.com/avatar/96e7bf0d4fd16c00283e06ae9461ebeb?s=64&d=identicon&r=PG" /><noscript><img loading="lazy" decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://www.gravatar.com/avatar/96e7bf0d4fd16c00283e06ae9461ebeb?s=64&d=identicon&r=PG" alt="Love Trivedi's user avatar" width="32" height="32" /></noscript></p>
</div>
<div>
<p>Love Trivedi<span>Love Trivedi</span></p>
<p><span>3,819</span><span>3 gold badges</span><span>19 silver badges</span><span>26 bronze badges</span>
        </p>
</div>
</div>
</div>
<p><span>0</span></p>
</div>
<div>
<div>
<div>
<p>In Firefox and Internet Explorer, the normal input text color overrides the color property of placeholders. So, we need to </p>
<pre><code>::-webkit-input-placeholder { 
    color: red; text-overflow: ellipsis; 
}
:-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}
::-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
} /* For the future */
:-ms-input-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}
</code></pre>
</p></div>
<div>
<div>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3C/svg%3E" alt="Peter Mortensen's user avatar" width="32" height="32" data-lazy-src="https://i.stack.imgur.com/RIZKi.png?s=64&g=1" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://i.stack.imgur.com/RIZKi.png?s=64&g=1" alt="Peter Mortensen's user avatar" width="32" height="32" /></noscript></p>
</div>
<div>
<p>
        answered <span>Feb 14, 2013 at 21:11</span>
    </p>
<div>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3C/svg%3E" alt="Dionysios Arvanitis's user avatar" width="32" height="32" data-lazy-src="https://i.stack.imgur.com/Rzxl4.jpg?s=64&g=1" /><noscript><img loading="lazy" decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://i.stack.imgur.com/Rzxl4.jpg?s=64&g=1" alt="Dionysios Arvanitis's user avatar" width="32" height="32" /></noscript></p>

<div class="quads-location quads-ad193935 " id="quads-ad193935" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-11" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-11",
                renderTo: "yandex_rtb_R-A-6935943-11",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

</div>
</div></div>
</div>
<p><span>0</span></p>
</div>
<div>
<div>
<p>CSS provides the <code>::placeholder</code> pseudo-element.</p>
<p>Note that the .placeholder mixin from Bootstrap is deprecated in favor of this.</p>
<p>Example:</p>
<pre><code>input::placeholder { color: black; }
</code></pre>
<p>When using autoprefixer the above will be converted to the correct code for all browsers.</p>
</div>
<p><span>1</span></p>
</div>
<div>
<div>
<p>Cross-browser solution:</p>
<pre><code>/* all elements */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual elements: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual elements: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
</code></pre>
<p>Credit: David Walsh</p>
</div>
<p><span>0</span></p>
</div>
<div>
<div>
<p>Now we have a standard way to apply CSS to an input’s placeholder : <code>::placeholder</code> pseudo-element from this CSS Module Level 4 Draft.</p>

<div class="quads-location quads-ad193936 " id="quads-ad193936" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-12" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-12",
                renderTo: "yandex_rtb_R-A-6935943-12",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

</div>
<p><span>1</span></p>
</div>
<div>
<p>I just realize something for Mozilla Firefox 19+ that the browser gives an opacity value for the placeholder, so the color will not be what you really want.</p>
<pre><code>input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #eee; opacity:1;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    color: #eee; opacity:1;
}
input::-moz-placeholder, textarea::-moz-placeholder {
    color: #eee; opacity:1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #eee; opacity:1;
}
</code></pre>
<p>I overwrite the <code>opacity</code> for 1, so it will be good to go.</p>
</div>
<div>
<div>
<div>
<p>I don’t remember where I’ve found this code snippet on the Internet (it wasn’t written by me, don’t remember where I’ve found it, nor who wrote it).</p>
<pre><code>$('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        })
    });
</code></pre>
<p>Just load this JavaScript code and then edit your placeholder with CSS by calling this rule:</p>
<pre><code>form .placeholder {
   color: #222;
   font-size: 25px;
   /* etc. */
}
</code></pre>
</p></div>
<div>
<div>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3C/svg%3E" alt="Peter Mortensen's user avatar" width="32" height="32" data-lazy-src="https://i.stack.imgur.com/RIZKi.png?s=64&g=1" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://i.stack.imgur.com/RIZKi.png?s=64&g=1" alt="Peter Mortensen's user avatar" width="32" height="32" /></noscript></p>
</div>
<div>
<p>
        answered <span>Apr 14, 2013 at 2:28</span>
    </p>
<div>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3C/svg%3E" alt="Dragos Rizescu's user avatar" width="32" height="32" data-lazy-src="https://i.stack.imgur.com/JOwPH.jpg?s=64&g=1" /><noscript><img loading="lazy" decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://i.stack.imgur.com/JOwPH.jpg?s=64&g=1" alt="Dragos Rizescu's user avatar" width="32" height="32" /></noscript></p>
</div>
<div>
<p>Dragos Rizescu<span>Dragos Rizescu</span></p>

<div class="quads-location quads-ad193937 " id="quads-ad193937" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-13" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-13",
                renderTo: "yandex_rtb_R-A-6935943-13",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<p><span>3,340</span><span>5 gold badges</span><span>31 silver badges</span><span>42 bronze badges</span>
        </p>
</div>
</div></div>
</div>
<p><span>2</span></p>
</div>
<div>
<div>
<p>For Bootstrap users, if you are using <code>class="form-control"</code>, there may be a CSS specificity issue. You should get a higher priority:</p>
<pre><code>.form-control::-webkit-input-placeholder {
    color: red;
}
//.. and other browsers
</code></pre>
<p>Or if you are using Less:</p>
<pre><code>.form-control{
    .placeholder(red);
}
</code></pre>
</p></div>
<p><span>0</span></p>
</div>
<div>
<div>
<div>
<p>I think this code will work because a placeholder is needed only for input type text. So this one line CSS will be enough for your need:</p>
<pre><code>input[type="text"]::-webkit-input-placeholder {
    color: red;
}
</code></pre>
</p></div>
<div>
<div>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3C/svg%3E" alt="Peter Mortensen's user avatar" width="32" height="32" data-lazy-src="https://i.stack.imgur.com/RIZKi.png?s=64&g=1" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://i.stack.imgur.com/RIZKi.png?s=64&g=1" alt="Peter Mortensen's user avatar" width="32" height="32" /></noscript></p>
</div>
<div>
<p>
        answered <span>Jun 25, 2015 at 9:01</span>
    </p>

<div class="quads-location quads-ad193938 " id="quads-ad193938" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-14" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-14",
                renderTo: "yandex_rtb_R-A-6935943-14",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<div>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3C/svg%3E" alt="Alias Varghese's user avatar" width="32" height="32" data-lazy-src="https://i.stack.imgur.com/LgJGX.jpg?s=64&g=1" /><noscript><img loading="lazy" decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://i.stack.imgur.com/LgJGX.jpg?s=64&g=1" alt="Alias Varghese's user avatar" width="32" height="32" /></noscript></p>
</div>
<div>
<p>Alias Varghese<span>Alias Varghese</span></p>
<p><span>2,032</span><span>2 gold badges</span><span>23 silver badges</span><span>52 bronze badges</span>
        </p>
</div>
</div></div>
</div>
<p><span>1</span></p>
</div>
<div>
<p>If you are using Bootstrap and couldn’t get this working then probably you missed the fact that Bootstrap itself adds these selectors. This is Bootstrap v3.3 we are talking about.</p>
<p>If you are trying to change the placeholder inside a <strong>.form-control</strong> CSS class then you should override it like this:</p>
<pre><code>.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #777;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #777;
    opacity:  1;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #777;
    opacity:  1;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #777;
}
</code></pre>
</p></div>
<div>
<div>
<div>
<p>How about this</p>
<div>
<pre><code><input type="text" value="placeholder text" onfocus="this.style.color='#000'; 
    this.value='';" style="color: #f00;" /></code></pre>
</div>
<p>No CSS or placeholder, but you get the same functionality.</p>
</div>
<div>
<div>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3C/svg%3E" alt="Mobarak Ali's user avatar" width="32" height="32" data-lazy-src="https://i.stack.imgur.com/eUnxh.jpg?s=64&g=1" /><noscript><img loading="lazy" decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://i.stack.imgur.com/eUnxh.jpg?s=64&g=1" alt="Mobarak Ali's user avatar" width="32" height="32" /></noscript></p>

<div class="quads-location quads-ad193939 " id="quads-ad193939" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-15" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-15",
                renderTo: "yandex_rtb_R-A-6935943-15",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

</div>
<div>
<p>
        answered <span>Oct 8, 2012 at 19:21</span>
    </p>
<div>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2032%2032'%3E%3C/svg%3E" alt="user1729061's user avatar" width="32" height="32" data-lazy-src="https://www.gravatar.com/avatar/e5aa5a4a665c39bab76e7fbbc4b68089?s=64&d=identicon&r=PG" /><noscript><img loading="lazy" decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://www.gravatar.com/avatar/e5aa5a4a665c39bab76e7fbbc4b68089?s=64&d=identicon&r=PG" alt="user1729061's user avatar" width="32" height="32" /></noscript></p>
</div>
<div>
<p>user1729061<span>user1729061</span></p>
<p><span>487</span><span>3 silver badges</span><span>4 bronze badges</span>
        </p>
</div>
</div></div>
</div>
<p><span>4</span></p>
</div>
<div>
<p>This short and clean code:</p>
<pre><code>::-webkit-input-placeholder {color: red;}
:-moz-placeholder           {color: red; /* For Firefox 18- */}
::-moz-placeholder          {color: red; /* For Firefox 19+ */}
:-ms-input-placeholder      {color: red;}
</code></pre>
</p></div>
<div>
<div>
<p>I have tried every combination here to change the color, on my mobile platform, and eventually it was:</p>
<pre><code>-webkit-text-fill-color: red;
</code></pre>
<p>which did the trick.</p>
</div>
<p><span>1</span></p>

<div class="quads-location quads-ad193940 " id="quads-ad193940" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-16" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-16",
                renderTo: "yandex_rtb_R-A-6935943-16",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

</div>
<div>
<div>
<p>Adding an actual very nice and simple possibility: CSS filters!</p>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="enter image description here" data-lazy-src="https://i.stack.imgur.com/BjNTb.png" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://i.stack.imgur.com/BjNTb.png" alt="enter image description here" /></noscript></p>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="enter image description here" data-lazy-src="https://i.stack.imgur.com/FxyFg.png" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://i.stack.imgur.com/FxyFg.png" alt="enter image description here" /></noscript></p>
<p><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="enter image description here" data-lazy-src="https://i.stack.imgur.com/VQ4fu.png" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="https://i.stack.imgur.com/VQ4fu.png" alt="enter image description here" /></noscript></p>
<p>It will style everything, including the placeholder.</p>
<p>The following will set both <code>input</code> elements on the same palette, using the hue filter for color changes. It render very well now in browsers (except ie…)</p>
<div>
<pre><code>input {
  filter: sepia(100%) saturate(400%) grayscale(0) contrast(200%) hue-rotate(68deg) invert(18%);
}</code></pre>
<pre><code><input placeholder="Hello world!" />
<input type="date" /><br>
<input type="range" />
<input type="color" /></code></pre>
</div>
<p>To allow users to change it dynamically, using an input type color for changes, or to find nuances, check out this snippet:</p>
<p>From: Codepen</p>
<div>
<pre><code>function stylElem() {
  stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0)
  Array.from(document.querySelectorAll('input, audio, video')).forEach(function(e){
      e.style.cssText += ";filter:sepia(100%) saturate(400%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)"
  out.innerText = e.style.cssText
})()}

stylElem()</code></pre>
<pre><code>body {background: black; color: white}</code></pre>
<pre><code>Choose a color!
<input type="color" id="stylo" oninput="stylElem()">
<br>
<div id="out"></div> <p>
  <input placeholder="Hello world!" />
  <input type="date" /><br>
  <input type="range" />
 <br>
<audio controls src="#"></audio> <br><br> 
<video controls src="#"></video></code></pre>
</div>
<p>Css filters docs: https://developer.mozilla.org/en-US/docs/Web/CSS/filter</p>
</div>
<p><span>0</span></p>

<div class="quads-location quads-ad193941 " id="quads-ad193941" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-17" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-17",
                renderTo: "yandex_rtb_R-A-6935943-17",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

</div>
<div>
<p>For SASS/SCSS user using Bourbon, it has a built-in function.</p>
<pre><code>//main.scss
@import 'bourbon';

input {
  width: 300px;

@include placeholder {
    color: red;
  }
}
</code></pre>
<p>CSS Output, you can also grab this portion and paste into your code.</p>
<pre><code>//main.css

input {
  width: 300px;
}

input::-webkit-input-placeholder {
  color: red;
}
input:-moz-placeholder {
  color: red;
}
input::-moz-placeholder {
  color: red;
}
input:-ms-input-placeholder {
  color: red;
}
</code></pre>
</p></div>
<div>
<p>try this code for different input element different style</p>
<pre><code>your css selector::-webkit-input-placeholder { /*for webkit */
    color:#909090;
    opacity:1;
}
 your css selector:-moz-placeholder { /*for mozilla */
    color:#909090;
    opacity:1;
}
 your css selector:-ms-input-placeholder { /*for for internet exprolar */ 
   color:#909090;
   opacity:1;
}
</code></pre>
<p>example 1:</p>
<pre><code>input[type="text"]::-webkit-input-placeholder { /*for webkit */
    color: red;
    opacity:1;
}
 input[type="text"]:-moz-placeholder { /*for mozilla */
    color: red;
    opacity:1;
}
 input[type="text"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: red;
   opacity:1;
}
</code></pre>
<p>example 2:</p>
<pre><code>input[type="email"]::-webkit-input-placeholder { /*for webkit */
    color: gray;
    opacity:1;
}
 input[type="email"]:-moz-placeholder { /*for mozilla */
    color: gray;
    opacity:1;
}
 input[type="email"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: gray;
   }
</code></pre>
</p></div>
<div>
<p>This is fine for most of the modern browsers</p>
<pre><code>input::placeholder{
  color: red; // css implementation
}
</code></pre>
<p>Just in case if you are using SCSS</p>
<pre><code>input {
  &::placeholder {
    color: red; // scss
  }
}
</code></pre>
</p>

<div class="quads-location quads-ad193942 " id="quads-ad193942" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-18" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-18",
                renderTo: "yandex_rtb_R-A-6935943-18",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>
</div>
<div>
<p>Here is one more example:</p>
<div>
<pre><code>.form-control::-webkit-input-placeholder {
  color: red;
  width: 250px;
}
h1 {
  color: red;
}</code></pre>
<pre><code><div class="col-sm-4">
  <input class="form-control" placeholder="Enter text here.." ng-model="Email" required/>
</div></code></pre>
</div></div>
<div>
<p>You can change an HTML5 input’s placeholder color with CSS.  If by chance, your CSS conflict, this code note working , you can use (!important) like below.</p>
<pre><code>::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:#909 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:#909 !important;
   opacity:1 !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:#909 !important;
   opacity:1 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:#909 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:#909 !important;
}

<input placeholder="Stack Snippets are awesome!">
</code></pre>
<p>Hope this will help.</p>
</div>
<div>
<p>OK, placeholders behave differently in different browsers, so you need using browser prefix in your CSS to make them identical, for example Firefox gives a transparency to placeholder by default, so need to add opacity 1 to your css, plus the color, it’s not a big concern most of the times, but good to have them consistent:</p>
<pre><code>*::-webkit-input-placeholder { /* WebKit browsers */
    color:    #ccc;
}
*:-moz-placeholder { /* Mozilla Firefox <18 */
    color:    #ccc;
    opacity:  1;
}
*::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #ccc;
    opacity:  1;
}
*:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #ccc;
}
</code></pre>
</p></div>
<div>
<p>You can use this for input and focus style:</p>
<pre><code>input::-webkit-input-placeholder  { color:#666;}
input:-moz-placeholder  { color:#666;}
input::-moz-placeholder { color:#666;}
input:-ms-input-placeholder  { color:#666;}
/* focus */
input:focus::-webkit-input-placeholder { color:#eee; }
input:focus:-moz-placeholder { color:#eee } /* FF 4-18 */
input:focus::-moz-placeholder { color:#eee } /* FF 19+ */
input:focus:-ms-input-placeholder { color:#eee } /* IE 10+ */
</code></pre>
</p></div>
<div>
<p>The easiest way would be:</p>
<pre><code>#yourInput::placeholder {
    color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {
    color: red;
}
</code></pre>
</p></div>
<div>
<p>Here is the solution with <strong>CSS selectors</strong></p>

<div class="quads-location quads-ad193943 " id="quads-ad193943" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-19" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-19",
                renderTo: "yandex_rtb_R-A-6935943-19",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<pre><code>::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
</code></pre>
<pre><code>:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
</code></pre>
<pre><code>::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
</code></pre>
<pre><code>::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}
</code></pre>
<pre><code>:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
</code></pre>
<ul>
<li><strong>WebKit, Blink</strong> <strong>(Safari, Google Chrome, Opera 15+)</strong> and <strong>Microsoft Edge</strong> are using a pseudo-element: <br />
::-webkit-input-placeholder.</li>
<li><strong>Mozilla Firefox 4 to 18</strong> is using a pseudo-class: <br />
:-moz-placeholder (one colon). <br />
<strong>Mozilla Firefox 19+</strong> is using a pseudo-element: <br />
::-moz-placeholder, but the old selector will still work for a while.</li>
<li><strong>Internet Explorer 10 and 11</strong> are using a pseudo-class: <br />
:-ms-input-placeholder.</li>
<li><strong>Internet Explorer 9</strong> and lower does not support the placeholder attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.</li>
</ul></div>
<div>
<pre><code>::placeholder{
  color: red;
}</code></pre>
<pre><code><input type="text" placeholder="Value"></code></pre>
</div>
<h2>
</h2></div>
</p></div>
</div>
<div class="source-url"><a href="https://stackoverflow.com/questions/2610497/change-a-html5-inputs-placeholder-color-with-css" rel="noopener" target="_blank">Источник</a></div>
<div>
<div>
<p>В HTML5 есть замечательный атрибут — <strong>placeholder</strong> (текст-подсказка для элементов ввода). Задается он следующим образом:</p>
<blockquote><p><input type=«text» <strong>placeholder=</strong>«type here some text» /></p></blockquote>
<p>
Обычно этот текст отображается серым цветом, но допустим у нас есть необходимость стилизовать этот текст с помощью CSS.</p>
<p>Пока это можно сделать только в Google Chrome, Safari и Firefox, так как в Opera пока еще нет возможность задавать для него стили, а IE не поддерживает его вовсе.</p>
<p><strong>CSS правила для webkit и mozilla:</strong></p>
<blockquote><p><code>input::-webkit-input-placeholder {}<br />
input:-moz-placeholder {}<br />
</code></p></blockquote>
<p>
Только имейте ввиду, что нельзя совмещать эти селекторы в один, и если вы напишете:</p>
<blockquote><p><code>input:-moz-placeholder,<br />
input::-webkit-input-placeholder { }<br />
</code></p></blockquote>
<p>то CSS правила не будут работать. И обратите внимание, что для webkit надо писать два двоеточия, а для mozilla — одно.</p>

<div class="quads-location quads-ad193944 " id="quads-ad193944" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-20" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-20",
                renderTo: "yandex_rtb_R-A-6935943-20",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<p><strong>Еще несколько примеров:</strong></p>
<blockquote><p><code>/* стили для webkit */<br />
#field2::-webkit-input-placeholder { color:#00f; }<br />
#field3::-webkit-input-placeholder {<br />
 color:#090;<br />
 background:lightgreen;<br />
 text-transform:uppercase;<br />
}<br />
#field4::-webkit-input-placeholder {<br />
 font-style:italic;<br />
 text-decoration:overline;<br />
 letter-spacing:3px; color:#999;<br />
}</p>
<p>/* стили для mozilla */<br />
#field2:-moz-placeholder { color:#00f; }<br />
#field3:-moz-placeholder {<br />
 color:#090; background:lightgreen;<br />
 text-transform:uppercase;<br />
}<br />
#field4:-moz-placeholder {<br />
 font-style:italic;<br />
 text-decoration:overline;<br />
 letter-spacing:3px;<br />
 color:#999;<br />
}</p>
<p></code></p></blockquote>
<p>Также следует заметить, что разные браузеры по разному поддерживают стили для плейсхолдера. Например в Firefox вы можете задать для него цвет фона, а в Chrome нет.</p>
<h5>Список поддерживаемых CSS стилей для атрибута placeholder:</h5>
<table>
<tbody>
<tr>
<td></td>
<td>Chrome 10(Win 7)</td>
<td>Chrome 11 (Win 7)</td>
<td>Firefox 4(Win 7)</td>
<td>Safari 3.1(Win XP & OS X)</td>
<td>Safari 5(Win 7 & OS X)</td>
<td>Opera 11(Win 7)</td>
</tr>
<tr>
<td>background-color</td>
<td>нет</td>
<td>нет</td>
<td>+</td>
<td>нет</td>
<td>+</td>
<td>нет</td>
</tr>
<tr>
<td>border</td>
<td>нет</td>
<td>нет</td>
<td>+</td>
<td>нет</td>
<td>+</td>
<td>нет</td>
</tr>
<tr>
<td>color</td>
<td>+</td>
<td>+</td>
<td>+</td>
<td>нет</td>
<td>+</td>
<td>нет</td>
</tr>
<tr>
<td>font-size</td>
<td>+</td>
<td>+</td>
<td>+</td>
<td>нет</td>
<td>+</td>
<td>нет</td>
</tr>
<tr>
<td>font-style</td>
<td>+</td>
<td>+</td>
<td>+</td>
<td>нет</td>
<td>+</td>
<td>нет</td>
</tr>
<tr>
<td>font-weight</td>
<td>+</td>
<td>+</td>
<td>+</td>
<td>нет</td>
<td>+</td>
<td>нет</td>
</tr>
<tr>
<td>letter-spacing</td>
<td>+</td>
<td>+</td>
<td>+</td>
<td>нет</td>
<td>+</td>
<td>нет</td>
</tr>
<tr>
<td>line-height</td>
<td>нет</td>
<td>нет</td>
<td>нет</td>
<td>нет</td>
<td>нет</td>
<td>нет</td>
</tr>
<tr>
<td>padding top/bottom</td>
<td>нет</td>
<td>нет</td>
<td>+</td>
<td>нет</td>
<td>+</td>
<td>нет</td>
</tr>
<tr>
<td>padding left/right</td>
<td>нет</td>
<td>нет</td>
<td>+</td>
<td>нет</td>
<td>нет</td>
<td>нет</td>
</tr>
<tr>
<td>text-decoration</td>
<td>нет</td>
<td>нет</td>
<td>+</td>
<td>нет</td>
<td>+</td>
<td>нет</td>
</tr>
<tr>
<td>text-transform</td>
<td>нет</td>
<td>нет</td>
<td>+</td>
<td>нет</td>
<td>+</td>
<td>нет</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="source-url"><a href="https://habr.com/ru/post/120152/" rel="noopener" target="_blank">Источник</a></div>
<div>
<div>
<article>
<h2><span>Цвет замещающего текста</span></h2>
<div>
<p>  В HTML5 к полям формы добавлен атрибут <span>placeholder</span>, который  устанавливает замещающий текст. Такой текст отображается серым цветом и  пропадает, когда поле получает фокус. Использование этого атрибута достаточно  просто, следует только написать текст, всё остальное браузер берет на себя.</p>
<p><input placeholder=»Текст»></p>
<p>  Серый цвет, используемый по умолчанию, выбран удачно, но не  всегда вписывается в дизайн страницы, особенно если меняется цвет фона полей  формы, как показано в примере 1.</p>
<p>  Пример 1. Использование placeholder</p>
<p><span>HTML5</span><span>CSS 2.1</span><span>IE</span><span>Cr</span><span>Op</span><span>Sa</span><span>Fx</span></p>

<div class="quads-location quads-ad193945 " id="quads-ad193945" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-21" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-21",
                renderTo: "yandex_rtb_R-A-6935943-21",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<pre><code><!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>placeholder</title>
  <style>
   body {background: #053f38; color: #98baba; }
   input[type="search"] { 
    padding: 3px;
    background: #333;
    color: #053f38;
    border: 1px solid #ccc;
   }
  </style>
 </head>
 <body> 
  <form action="handler.php">
   <p><input type="search" placeholder="Поиск по сайту" />
   <input type="submit" value="Искать"></p>
  </form>
</body>
</html></code></pre>
<p>Для изменения цвета текста в атрибуте <span>placeholder</span> в  Firefox применяется псевдокласс <span>::-moz-placeholder</span>.</p>
<p>  input::-moz-placeholder  { color: red; }</p>
<p>  В Safari и Chrome стиль текста меняется следующим образом.</p>
<p>  input::-webkit-input-placeholder  { color: red; }</p>
<p>  Таким образом, соединяя воедино этот стиль, получим  страницу, одинаково работающую в браузерах Firefox, Safari и Chrome (пример 2).</p>
<p> Пример 2. Цвет текста</p>
<p><span>HTML5</span><span>CSS3</span><span>IE</span><span>Cr</span><span>Op</span><span>Sa</span><span>Fx</span></p>
<pre><code><!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>placeholder</title>
  <style>
   body {background: #053f38; color: #98baba; }
   input[type="search"] { 
    padding: 3px;
    background: #333;
    color: #053f38;
    border: 1px solid #ccc;
   }
   input[type="search"]::-webkit-input-placeholder {
    color: #ccc;
   } 
   input[type="search"]::-moz-placeholder {
    color: #ccc;
   }
  </style>
 </head>
 <body> 
  <form action="handler.php">
   <p><input type="search" placeholder="Поиск по сайту" />
   <input type="submit" value="Искать"></p>
  </form>
</body>
</html></code></pre>
<p>Браузеры «не любят» группировать такой стиль, поэтому мне  пришлось для отдельных браузеров повторить конструкцию.</p>
<p>  Теперь что касается других браузеров. Internet Explorer вообще  не понимает атрибут <span>placeholder</span> и отказывается с ним что-либо делать, а Opera не умеет менять цвет текста через стили. Так что  приведённый трюк работает только в Firefox, Safari и Chrome.</p>
</div>
</article>
</div>
</div>
<div class="source-url"><a href="http://htmlbook.ru/blog/tsvet-zameshchayushchego-teksta" rel="noopener" target="_blank">Источник</a></div>
<div>
<div>
<p>Используйте псевдоэлемент <code>::placeholder</code> для стилизации дефолтного текста в элементе <code>input</code> или <code>textarea</code>. Большинство современных браузеров поддерживают это, но для старых браузеров требуются префиксы.</p>

<div class="quads-location quads-ad193946 " id="quads-ad193946" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-22" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-22",
                renderTo: "yandex_rtb_R-A-6935943-22",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<pre>::placeholder { 
 color: deeppink;
 font-size: 5rem;
 text-transform: uppercase;
}</pre>
<p>HTML</p>
<pre></pre>
<h2>Префиксы</h2>
<p>Используемый мной синтаксис поддерживается большинством современных браузеров:</p>
<pre>::placeholder { 
 color: deeppink;
}</pre>
<p>Но для более старых браузеров вам нужно будет использовать префиксы поставщика.</p>
<pre>/* WebKit, Edge */
::-webkit-input-placeholder {
 color: deeppink;
}

/* Firefox 4-18 */
:-moz-placeholder { 
 color: deeppink;
 opacity: 1;
}

/* Firefox 19+ */
::-moz-placeholder { 
 color: deeppink;
 opacity: 1;
}

/* IE 10-11 */
:-ms-input-placeholder { 
 color: deeppink;
}

/* Edge */
::-ms-input-placeholder { 
 color: deeppink;
}

/* MODERN BROWSER */
::placeholder { 
 color: deeppink;
}</pre>
<p>Вау! Я знаю, это огромный список. И вы можете заметить довольно много разных вариантов реализации. Итак, давайте разберем эти различия и поймем, что здесь происходит.</p>
<h3>Псевдоэлемент против псевдокласса</h3>
<p>Вы можете заметить, что я использую двойное двоеточие <code>::</code>. Это называется псевдоэлементом и было введено в CSS3. Если бы мы использовали одно двоеточие <code>:</code>, это назвали бы псевдоклассом.</p>
<p>Поскольку псевдоэлемент, <code>::</code> был представлен в CSS3, а не в более ранних версиях CSS, некоторые старые браузеры, такие как Internet Explorer, просто никогда не поддерживали его. Принимая во внимание, что псевдокласс, <code>:</code> был представлен ранее (в CSS1 и CSS2). Вот почему гораздо больше браузеров, включая Internet Explorer, поддерживают его.</p>
<p>Следовательно, в нашем <code>::placeholder</code> префиксе поставщика вы будете использовать смесь псевдокласса и псевдоэлемента.</p>
<h3>Непрозрачность Placeholder в Firefox по умолчанию</h3>
<p>Хорошо, с чем это связано <code>opacity: 1</code> для Firefox. Это потому, что по умолчанию для placeholder Firefox применяется значение непрозрачности. Таким образом, чтобы переопределить это, мы должны установить его принудительно. Таким образом, наш placeholder будет отображаться и не будет иметь блеклого внешнего вида по умолчанию.</p>
<h3>CSS-обработка неверных селекторов</h3>
<p>Таким образом, вы также можете подумать, почему мы не просто сгруппировали все префиксы вендоров вместе как в примере ниже:</p>
<pre>::-moz-placeholder, /* Firefox 19+ */
:-moz-placeholder /* Firefox 4-18 */
{ 
 color: deeppink;
 opacity: 1;
}</pre>
<p>Ну, это потому, что в CSS3 было правило, которое гласит:</p>

<div class="quads-location quads-ad193947 " id="quads-ad193947" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-23" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-23",
                renderTo: "yandex_rtb_R-A-6935943-23",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<blockquote>
<p>группа селекторов, содержащая недопустимый селектор, недействительна.</p>
</blockquote>
<p>Давайте посмотрим на пример, чтобы увидеть, что это значит. Вот правильный CSS-селектор</p>

<div class="quads-location quads-ad193952 " id="quads-ad193952" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-28" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-28",
                renderTo: "yandex_rtb_R-A-6935943-28",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<pre>h1 {
 color: blue;
}</pre>
<p>Так что в нашем HTML это будет выглядеть как ожидалось</p>
<pre><h2>Hello</h2> 
</pre>
<p>Но что произойдет, если мы добавим неверный селектор CSS</p>
<pre>h1, /* valid */
h2::poop /* invalid */
{
 color: blue;
}</pre>
<p>Так как в группе есть недопустимый селектор CSS. Вся группа будет считаться недействительной, и стилизация не будет применена.</p>
<pre><h2>Hello</h2> 
</pre>
<p>Вот почему нам нужны отдельные правила для каждого браузера. В противном случае вся группа будет игнорироваться всеми браузерами.</p>
<p>⭐️ <strong>НО! </strong>похоже, это можно изменить в CSS4.</p>
<blockquote>
<p>Как правило, если в цепочке или группе селекторов присутствует недопустимый псевдоэлемент или псевдокласс, весь список селекторов является недействительным. Если псевдоэлемент (но не псевдокласс) имеет префикс -webkit-, то по состоянию на Firefox 63 браузеры Blink, Webkit и Gecko предполагают, что он действителен, не аннулирует список выбора.</p>
</blockquote>
<p>Подробнее об этом читайте в статье Криса Койера «Один неверный псевдо-селектор равен целому игнорируемому селектору»</p>
<h2>Поддерживаемые стили</h2>
<p>Вот список всех стилей, которые вы можете применить к вашему placeholder:</p>

<div class="quads-location quads-ad193948 " id="quads-ad193948" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-24" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-24",
                renderTo: "yandex_rtb_R-A-6935943-24",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<ul>
<li><code>background</code> свойства</li>
<li><code>color</code></li>
<li><code>font</code> свойства</li>
<li><code>letter-spacing</code></li>
<li><code>line-height</code></li>
<li><code>opacity</code></li>
<li><code>text-decoration</code></li>
<li><code>text-indent</code></li>
<li><code>text-transform</code></li>
<li><code>vertical-align</code></li>
<li><code>word-spacing</code></li>
</ul>
<h2>Проблемы доступности</h2>
<p>Способность стилизовать заполнители — это круто. Но мне нужно отметить кое-что действительно важное — текст-заполнитель не заменяет элемент метки <code></code>!! Я был виновен в этом, когда впервые попал в веб-программирование 🙁. Когда ваша форма основана исключительно на инструкциях-заполнителях без меток, это очень вредно для доступности. Доступность важна не только для того, чтобы сделать ваш веб-сайт доступным для всех, но и для повышения удобства работы пользователей. И, в конечном итоге, создание лучшего сайта или веб-приложения.</p>
<p>Вот действительно потрясающая статья о том, как использовать заполнители без каких-либо меток. Ниже приведены три основных тезиса:</p>
<ol>
<li>Поскольку placeholder исчезает в при вводе, он может напрягать кратковременную память вашего пользователя</li>
<li>Без label пользователи не могут проверить свою работу перед отправкой формы.</li>
<li>Когда появляются сообщения об ошибках, люди не знают, как решить проблему.</li>
</ol>
<h2>Автоматически добавлять Vendor-префиксы</h2>
<p>Если вы не хотите иметь дело со всеми префиксами вендоров, вы можете использовать PostCSS с плагином Autoprefixer . Этот плагин будет анализировать ваш CSS и добавлять префиксы.</p>
</div>
</div>
<div class="source-url"><a href="https://dev-gang.ru/article/stilizuem-placeholder-s-pomosczu-css-avfxxm4hl1/" rel="noopener" target="_blank">Источник</a></div>
<div>
<div>
<p>  <img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt data-lazy-src="http://tradebenefit.ru/artimg/20170608055601245.jpg" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="http://tradebenefit.ru/artimg/20170608055601245.jpg" alt /></noscript></p>
<p>
Многие из вас нередко сталкивались с формами, где в качестве подсказок есть подписи. Они пропадают при на наборе текста. Так вот — это атрибут placeholder, который есть у элементов, которые созданы для ввода текста (input). С помощью него можно задать текст, который будет отображаться как подсказка до начала ввода в данное поле. К сожалению, не все браузеры одинаково корректно работают с данным атрибутом. Устаревшие версии и вовсе данный текст не отображают. </p>
<div>
<table>
<tbody>
<tr>
<td><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2030%200'%3E%3C/svg%3E" width="30" data-lazy-src="http://tradebenefit.ru/icons/pencil.png" /><noscript><img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);"  src="http://tradebenefit.ru/icons/pencil.png" width="30" /></noscript></td>
<td>Напомню, по статистике в Рунете устаревшими браузерами пользуется около 5% пользователей (это для очистки совести, если что). Надеюсь на ваших сайтах они не концентрируются)</td>
</tr>
</tbody>
</table>
</div>
<p>Теперь рассмотрим как сделать так, чтобы решить нижеописанные проблемы:</p>
<p>1. Как изменить стили для плейсхолдера;<br />
2. Как скрыть текст плейсхолдера не при вводе, а уже при нажатии на поле;<br />
3. Что делать с браузерами, где в принципе не отображается placeholder.</p>
<p>Во всех примерах будем работать с полем input.</p>
<h2>Как изменить цвет текста-подсказки в placeholder в input?</h2>
<p>
Давно уже не новость, что каждый браузер не только по-разному отображает placeholder, но и требует особых свойств для изменения стилей. И это я уже не говорю о соответствующих префиксах в написании. Давайте рассмотрим их.</p>
<p>По умолчанию во многих браузерах цвет подсказки — серый. В данном примере сделаем его чёрным.</p>

<div class="quads-location quads-ad193949 " id="quads-ad193949" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-25" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-25",
                renderTo: "yandex_rtb_R-A-6935943-25",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<pre> <style>
  ::-webkit-input-placeholder {color:#000000; opacity:1;}/* webkit */
  ::-moz-placeholder          {color:#000000; opacity:1;}/* Firefox 19+ */
  :-moz-placeholder           {color:#000000; opacity:1;}/* Firefox 18- */
  :-ms-input-placeholder      {color:#000000; opacity:1;}/* IE */
</style>

<input type="text" placeholder="Начните вводить текст" value="" /></pre>
<p><span>Демонстрация</span> <span>Скачать исходники</span></p>
<p>Свойство opacity, отвечающее за прозрачность, необходимо вводить для тех браузеров, где поддерживается прозрачность для данного элемента. В противном случае цвет будет серым, как и по умолчанию.</p>
<p>И да, можно использовать для указания этих свойств классы. Смотрим  ниже:</p>
<pre> .input-phone::-webkit-input-placeholder { color:red; }
 .input-text::-webkit-input-placeholder { color:green; }
 /* и так далее... */</pre>
<h2>Убираем placeholder при нажатии на поле</h2>
<p>
По умолчанию в браузерах текст из атрибута placeholder пропадает только после начала ввода, но есть и такие, кто хочет, чтобы этот текст не отвлекал уже на стадии нажатия на поле ввода. Чаще всего делают именно так. Для это нужна написать стили для фокуса, где цвет текста-подсказки станет полностью прозрачным, то есть его перестанет быть видно.</p>
<pre>  :focus::-webkit-input-placeholder {opacity:0;}/* webkit */
  :focus::-moz-placeholder          {opacity:0;}/* Firefox 19+ */
  :focus:-moz-placeholder           {opacity:0;}/* Firefox 18- */
  :focus:-ms-input-placeholder      {opacity:0;}/* IE */</pre>
<p><span>Демонстрация</span> <span>Скачать исходники</span></p>
<p>Можно даже настроить плавное изменение прозрачности или изменение цвета сss-анимацией. Но с кроссбраузерностью таких решений могут возникнуть проблемы.</p>
<h2>А что делать с бразуерами, которые не поддерживают атрибут placeholder в input?</h2>
<p>
Ну точно не теряться) Да, действительно, такие браузеры есть. Например, IE8. И да, есть люди-адепты, которые будут им пользоваться всегда. Если нужна составить решение для всех посетителей, то наберитесь ещё немного терпения.</p>
<p>Для решения этой проблемы скачайте популярный для этого jquery плагин — jquery.placeholder. Ссылок давать не буду, так как сегодня-завтра они изменятся. Но, если что, можете скачать рабочий пример с плагином в — скачать исходники.</p>
<p>Подключаем его. Не стоит забывать, что нужен ещё и в принципе jquery подключить. </p>
<pre>    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="/jquery.placeholder.min.js"></script>
    
    <script>
        $(function(){
            $('input[placeholder], textarea[placeholder]').placeholder();
        });
    </script>
    
    <style>
        input.placeholder, textarea.placeholder. { color: green; }
    </style></pre>
<p>Смотрим пример.</p>

<div class="quads-location quads-ad193950 " id="quads-ad193950" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-26" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-26",
                renderTo: "yandex_rtb_R-A-6935943-26",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

<p><span>Демонстрация</span> <span>Скачать исходники</span></p>
<p>Спасибо за внимание! И удачи в разработке!</p>
</div>
</div>
<div class="source-url"><a href="http://tradebenefit.ru/kak-izmenit-cvet-teksta-placeholder-css" rel="noopener" target="_blank">Источник</a></div>
</p>

<div class="quads-location quads-ad193928 " id="quads-ad193928" style="float:none;margin:0px 3px 3px 3px;padding:0px 0px 0px 0px;" data-lazydelay="3000">

<div id="yandex_rtb_R-A-6935943-4" ></div>
                       <script>
    (function(w, d, n, s, t) {
        w[n] = w[n] || [];
        w[n].push(function() {
            Ya.Context.AdvManager.render({
                blockId: "R-A-6935943-4",
                renderTo: "yandex_rtb_R-A-6935943-4",
                async: true
            });
        });
        t = d.getElementsByTagName("script")[0];
        s = d.createElement("script");
        s.type = "text/javascript";
        s.src = "//an.yandex.ru/system/context.js";
        s.async = true;
        t.parentNode.insertBefore(s, t);
    })(this, this.document, "yandexContextAsyncCallbacks");
</script>

</div>

</div>
</article>

<div class="b-share b-share--post">
                <div class="b-share__title">Понравилась статья? Поделить с друзьями:</div>

</div>

<h3>Читайте также: </h3>

<li class='li1'><a href='https://oshibkis.ru/kak-izmenit-tekst-notepad/' title='Как изменить текст notepad'>Как изменить текст notepad</a></li>
<li class='li2'><a href='https://oshibkis.ru/kak-izmenit-tekst-na-logotipe/' title='Как изменить текст на логотипе'>Как изменить текст на логотипе</a></li>
<li class='li1'><a href='https://oshibkis.ru/kak-izmenit-tekst-label-wpf/' title='Как изменить текст label wpf'>Как изменить текст label wpf</a></li>
<li class='li2'><a href='https://oshibkis.ru/kak-izmenit-tekst-na-kompyutere-na-sajte/' title='Как изменить текст на компьютере на сайте'>Как изменить текст на компьютере на сайте</a></li>
<li class='li1'><a href='https://oshibkis.ru/kak-izmenit-tekst-label-tkinter/' title='Как изменить текст label tkinter'>Как изменить текст label tkinter</a></li><br>