Css placeholder textarea: html — change placeholder text color of textarea

Стилизуем Placeholder с помощью CSS 

Используйте псевдоэлемент ::placeholder для стилизации дефолтного текста в элементе input или textarea. Большинство современных браузеров поддерживают это, но для старых браузеров требуются префиксы.

::placeholder { 
 color: deeppink;
 font-size: 5rem;
 text-transform: uppercase;
}

HTML

Префиксы

Используемый мной синтаксис поддерживается большинством современных браузеров:

::placeholder { 
 color: deeppink;
}

Но для более старых браузеров вам нужно будет использовать префиксы поставщика.

/* 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;
}

Вау! Я знаю, это огромный список. И вы можете заметить довольно много разных вариантов реализации. Итак, давайте разберем эти различия и поймем, что здесь происходит.

Псевдоэлемент против псевдокласса

Вы можете заметить, что я использую двойное двоеточие ::. Это называется псевдоэлементом и было введено в CSS3. Если бы мы использовали одно двоеточие :, это назвали бы псевдоклассом.

Поскольку псевдоэлемент, :: был представлен в CSS3, а не в более ранних версиях CSS, некоторые старые браузеры, такие как Internet Explorer, просто никогда не поддерживали его. Принимая во внимание, что псевдокласс, : был представлен ранее (в CSS1 и CSS2). Вот почему гораздо больше браузеров, включая Internet Explorer, поддерживают его.

Следовательно, в нашем ::placeholder префиксе поставщика вы будете использовать смесь псевдокласса и псевдоэлемента.

Непрозрачность Placeholder в Firefox по умолчанию

Хорошо, с чем это связано opacity: 1 для Firefox. Это потому, что по умолчанию для placeholder Firefox применяется значение непрозрачности. Таким образом, чтобы переопределить это, мы должны установить его принудительно. Таким образом, наш placeholder будет отображаться и не будет иметь блеклого внешнего вида по умолчанию.

CSS-обработка неверных селекторов

Таким образом, вы также можете подумать, почему мы не просто сгруппировали все префиксы вендоров вместе как в примере ниже:

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

Ну, это потому, что в CSS3 было правило, которое гласит:

группа селекторов, содержащая недопустимый селектор, недействительна.

Давайте посмотрим на пример, чтобы увидеть, что это значит. Вот правильный CSS-селектор

h2 {
 color: blue;
}

Так что в нашем HTML это будет выглядеть как ожидалось

Но что произойдет, если мы добавим неверный селектор CSS

h2, /* valid */
h3::poop /* invalid */
{
 color: blue;
}

Так как в группе есть недопустимый селектор CSS. Вся группа будет считаться недействительной, и стилизация не будет применена.

Вот почему нам нужны отдельные правила для каждого браузера. В противном случае вся группа будет игнорироваться всеми браузерами.

⭐️ НО! похоже, это можно изменить в CSS4.

Как правило, если в цепочке или группе селекторов присутствует недопустимый псевдоэлемент или псевдокласс, весь список селекторов является недействительным. Если псевдоэлемент (но не псевдокласс) имеет префикс -webkit-, то по состоянию на Firefox 63 браузеры Blink, Webkit и Gecko предполагают, что он действителен, не аннулирует список выбора.

Подробнее об этом читайте в статье Криса Койера «Один неверный псевдо-селектор равен целому игнорируемому селектору»

Поддерживаемые стили

Вот список всех стилей, которые вы можете применить к вашему placeholder:

• background свойства
• color
• font свойства
• letter-spacing
• line-height
• opacity
• text-decoration
• text-indent
• text-transform
• vertical-align
• word-spacing

Проблемы доступности

Способность стилизовать заполнители — это круто. Но мне нужно отметить кое-что действительно важное — текст-заполнитель не заменяет элемент метки !! Я был виновен в этом, когда впервые попал в веб-программирование 🙁. Когда ваша форма основана исключительно на инструкциях-заполнителях без меток, это очень вредно для доступности. Доступность важна не только для того, чтобы сделать ваш веб-сайт доступным для всех, но и для повышения удобства работы пользователей. И, в конечном итоге, создание лучшего сайта или веб-приложения.

Вот действительно потрясающая статья о том, как использовать заполнители без каких-либо меток. Ниже приведены три основных тезиса:

1. Поскольку placeholder исчезает в при вводе, он может напрягать кратковременную память вашего пользователя
2. Без label пользователи не могут проверить свою работу перед отправкой формы.
3. Когда появляются сообщения об ошибках, люди не знают, как решить проблему.

Автоматически добавлять Vendor-префиксы

Если вы не хотите иметь дело со всеми префиксами вендоров, вы можете использовать PostCSS с плагином Autoprefixer . Этот плагин будет анализировать ваш CSS и добавлять префиксы.

HTML/Атрибут placeholder (Элемент textarea)

Синтаксис

<textarea placeholder="[значение]">
  ...
</textarea>

Описание

Атрибут / параметр placeholder (от англ. «placeholder» ‒ «заполнитель») указывает краткую подсказку (слово или короткую фразу), предназначенную для помощи пользователю с вводом данных. Краткая подсказка отображается в элементе формы в случае, когда этот элемент не имеет значения. При этом подсказка может быть образцом вводимого значения или кратким описанием ожидаемого формата вводимых данных.

Примечание

• Как правило, браузеры отображают текст подсказки серым цветом для того, чтобы пользователь мог без особого труда отличить текст подсказки от текста относящегося к значению элемента;
• Для указания более длинной подсказки или другого поясняющего текста, рекомендуется размещать такой текст рядом с текстовым полем.

---

Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

---

Спецификация

Верс.	Раздел
HTML
2.0	Text Area: TEXTAREA
3.2	TEXTAREA multi-line text fields
4.01	17.7 The TEXTAREA element
5.0	4.10.11 The textarea element The placeholder attribute…
5.1	4.10.11. The textarea element The placeholder attribute. ..
XHTML
1.0	Extensible HyperText Markup Language
1.1	Extensible HyperText Markup Language

---

Значения

В качестве значения данного атрибута указывается текст краткой подсказки.

---

Пример использования

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Параметр placeholder (Элемент textarea)</title>

</head>
<body>
<h2>Пример использования атрибута «placeholder»</h2>
<textarea rows=»5″ cols=»50″ placeholder=»Поле для ввода многострочного текста»>
</textarea>
</body>
</html>

Параметр placeholder (Элемент textarea)

html — изменить цвет текста заполнителя текстовой области

спросил 5 лет, 7 месяцев назад

Изменено 16 дней назад

Просмотрено 95 тысяч раз

Я знаю, что есть этот пост об изменении текста-заполнителя. Я попытался внедрить в свои теги textarea

 textarea::-webkit-input-placeholder {
цвет: #fff;
}
textarea:-moz-placeholder { /* Firefox 18- */
цвет: #fff;
}
textarea::-moz-placeholder { /* Firefox 19+ */
цвет: #fff;
}
textarea:-ms-input-placeholder {
цвет: #fff;
}
 

но ничего не делает. Что мне не хватает?

Вот как выглядит одно из моих textarea

  this.props.handleUpdateQuestion(e, firstQuestion.Id)}
  placeholder="Общий вопрос удовлетворенности"
  name="SEO__Question__c"
  тип = "текст"
  className="slds-вход"
  значение={firstQuestion.SEO__Question__c ? firstQuestion.SEO__Question__c : ''}
  стиль = {inputStyle}
  автофокус
/>
 </pre> <ul> <li> HTML </li> <li> CSS </li> </ul> <p data-readability-styled="true">




            3
     </p> <p> Для современных браузеров используйте только псевдоэлемент ::placeholder: </p> <pre> textarea::placeholder {
  цвет: #0bf;
}
 </pre> <p> Устаревшие и современные браузеры: </p> <pre> textarea:-moz-placeholder, /* Firefox 18- */
textarea::-moz-placeholder, /* Firefox 19+ */
textarea:-ms-input-placeholder, /* IE 10+ */
textarea::-webkit-input-placeholder, /* на основе Webkit */
textarea::placeholder { /* Современные браузеры */
  цвет: #0bf;
} </pre><div id="yandex_rtb_2" class="yandex-adaptive classYandexRTB"></div>
<script type="text/javascript">

 if ( rtbW >= 960 ){ var rtbBlockID = "R-A-744004-3"; }
              else { var rtbBlockID = "R-A-744004-5"; }

window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo: "yandex_rtb_2",blockId: rtbBlockID,pageNumber: 2,onError: (data) => { var g = document.createElement("ins");
                    g.className = "adsbygoogle";
                    g.style.display = "inline";
                    if (rtbW >= 960){
                        g.style.width = "580px";
                        g.style.height = "400px";
                        g.setAttribute("data-ad-slot", "9935184599");
                    }else{
                        g.style.width = "300px";
                        g.style.height = "600px";
                        g.setAttribute("data-ad-slot", "9935184599");
                    }
                    g.setAttribute("data-ad-client", "ca-pub-1812626643144578");
                    g.setAttribute("data-alternate-ad-url", stroke2);
                    document.getElementById("yandex_rtb_2").appendChild(g);
                    (adsbygoogle = window.adsbygoogle || []).push({}); }})});

window.addEventListener("load", () => {

var ins = document.getElementById("yandex_rtb_2");
if (ins.clientHeight == "0") {
ins.innerHTML = stroke3;
}
}, true);
</script> <pre> <textarea placeholder="test"> 

Что касается вашего кода, заключите его в кавычки:

 onchange="{(e) => this. props.handleUpdateQuestion(e, firstQuestion.Id)} "
 

1

Я не уверен, но думаю, что сейчас нет необходимости использовать префиксы.

 textarea::placeholder {
  цвет: #fff;
}
 

2

 ::-webkit-input-placeholder {
       оранжевый цвет;
    }
    :-moz-placeholder { /* До Firefox 18, устарело в Firefox 19*/
       оранжевый цвет;
    }
    ::-moz-placeholder { /* Firefox 19+ */
       оранжевый цвет;
    }
    :-ms-ввод-заполнитель {
       оранжевый цвет;
    }
 

textarea::placeholder {цвет: #fff;}

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Стилизация текста-заполнителя с помощью CSS

Используйте псевдоэлемент ::placeholder для стилизации текста-заполнителя в элементе формы или </code>.<img loading='lazy' src='/800/600/http/i.ytimg.com/vi/asUBu38Cerg/sddefault.jpg' /> Большинство современных браузеров поддерживают это, но для более старых браузеров потребуются префиксы поставщиков. </p> <p> HTML </p> <ul> <li> Префиксы поставщиков <ul> <li> Псевдоэлементы и псевдоклассы </li> <li> Непрозрачность заполнителя Firefox по умолчанию </li> <li> Обработка недопустимых селекторов CSS </li> </ul> </li> <li> Поддерживаемые стили0024 <li> Вопросы доступности </li> <li> Автоматическое добавление префиксов поставщиков </li> <li> Вклад сообщества </li> <li> Ресурсы </li> </ul> <h3><span class="ez-toc-section" id="i-15"> Префиксы поставщиков </span></h3> <p> Таким образом, синтаксис, который я использовал, поддерживается большинством современных браузеров: </p> </p> использовать префиксы поставщиков. </p> <p> Ого! Я знаю, это огромный список. И вы можете заметить довольно много различных вариантов реализации. Итак, давайте разберем эти различия и поймем, что здесь происходит. </p> <h4><span class="ez-toc-section" id="i-16"> Псевдоэлемент против псевдокласса </span></h4> <p> Вы могли заметить, что я использую двойное двоеточие <code> :: </code> . Это называется псевдоэлементом, и он был введен в CSS3.<img loading='lazy' src='/800/600/http/line25.com/wp-content/uploads/2011/form/html5.png' /> Если бы мы использовали одно двоеточие <code> : </code> , это было бы псевдоклассом. </p> <p> Поскольку псевдоэлемент <code> :: </code> был представлен в CSS3, а не в более ранних версиях CSS, некоторые старые браузеры, такие как Internet Explorer, просто никогда не поддерживали его. В то время как псевдокласс <code> : </code> был введен ранее (в CSS1 и CSS2). Вот почему его поддерживает гораздо больше браузеров, включая Internet Explorer. </p> <p> Таким образом, в нашем префиксе поставщика <code> ::placeholder </code> вы будете использовать смесь псевдокласса и псевдоэлемента. </p> <h4><span class="ez-toc-section" id="Firefox_Placeholder"> Firefox Placeholder Непрозрачность по умолчанию </span></h4> <p> Хорошо, что там с непрозрачностью <code>: 1 </code> для Firefox. Это потому, что по умолчанию к заполнителям Firefox применяется значение непрозрачности. Итак, чтобы переопределить это, нам нужно установить его. Таким образом, наш текст-заполнитель будет отображаться и не будет выглядеть блеклым, как в настройках Firefox по умолчанию. </p> <h4><span class="ez-toc-section" id="CSS-2"> CSS-обработка недопустимых селекторов </span></h4> <p> Итак, вы также можете подумать, почему мы просто не сгруппировали все префиксы поставщиков вместе следующим образом: </p> <p> Ну, это потому, что в CSS3 было правило, которое гласит: </p> <blockquote> <p> группа селекторов, содержащих недопустимый селектор, является недопустимым.<img loading='lazy' src='/800/600/http/i.pinimg.com/736x/c3/c9/b1/c3c9b1c73af1901bcb3570b0085246f6.jpg' /> </p> </blockquote> <p> Давайте рассмотрим пример, чтобы понять, что это значит. Вот допустимый селектор CSS </p> <p> Таким образом, в нашем HTML это будет выглядеть так, как ожидалось </p> <p> Но что произойдет, если мы добавим недопустимый селектор CSS </p> <p> Так как в группе есть недопустимый селектор CSS. Вся группа будет считаться недействительной, и стиль не будет применяться. </p> <p> Поэтому нужны отдельные правила для каждого браузера. В противном случае вся группа будет игнорироваться всеми браузерами. </p> <p> ⭐️ <strong> НО! </strong> похоже, это можно изменить в CSS4. </p> <blockquote> <p> Как правило, если в цепочке или группе селекторов есть недопустимый псевдоэлемент или псевдокласс, весь список селекторов недействителен. Если псевдоэлемент (но не псевдокласс) имеет префикс -webkit-, начиная с Firefox 63, браузеры Blink, Webkit и Gecko предполагают, что он действителен, не делая недействительным список селекторов. </p> </blockquote> <p> Подробнее об этом читайте в статье Криса Койера «Один неверный псевдоселектор равен целому игнорируемому селектору» <code> фон </code> свойства </li> <li> <code> цвет </code> </li> <li> <code> шрифт </code> свойства </li> <li> <code> интервал между буквами </code> </li> <li> <code> высота строки <p> <ul>0018 </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> <h3><span class="ez-toc-section" id="Accessibility_Concerns"> Accessibility Concerns </span></h3> <p> Being able to style placeholders is awesome .<img loading='lazy' src='/800/600/http/i.stack.imgur.com/OESgg.jpg' /> Но мне нужно указать на кое-что действительно важное: текст-заполнитель не заменяет элемент метки, <code> <label> </code> !! Я грешил этим, когда впервые попал в веб-программирование 🙁. Когда ваша форма опирается исключительно на инструкции-заполнители без меток, это очень вредно для доступности. Доступность важна не только для того, чтобы сделать ваш веб-сайт доступным для всех, но и для улучшения взаимодействия с пользователем. И, в конечном итоге, создание лучшего веб-сайта или веб-приложения 💪 </p> <p> Вот действительно потрясающая статья о проблемах использования только заполнителей без каких-либо меток. Ниже приведены 3 верхних пункта: </p> <ol> <li> Поскольку текст-заполнитель исчезает в природе, он может напрягать кратковременную память вашего пользователя </li> <li> Без меток пользователи не могут проверить свою работу перед отправкой формы. </li> <li> Когда появляются сообщения об ошибках, люди не знают, как решить проблему. </li> </ol> <h3><span class="ez-toc-section" id="i-17"> Автоматическое добавление префиксов поставщиков </span></h3> <p> Если вы не хотите иметь дело со всеми префиксами поставщиков, вы можете использовать PostCSS с плагином Autoprefixer.<img loading='lazy' src='/800/600/http/i.pinimg.com/originals/33/22/c9/3322c9b51c025a60aede7696776ce20c.png' /><div id="yandex_rtb_1" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript"> if ( rtbW >= 960 ){ var rtbBlockID = "R-A-744004-3"; } else { var rtbBlockID = "R-A-744004-5"; } window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo: "yandex_rtb_1",blockId: rtbBlockID,pageNumber: 1,onError: (data) => { var g = document.createElement("ins"); g.className = "adsbygoogle"; g.style.display = "inline"; if (rtbW >= 960){ g.style.width = "580px"; g.style.height = "400px"; g.setAttribute("data-ad-slot", "9935184599"); }else{ g.style.width = "300px"; g.style.height = "600px"; g.setAttribute("data-ad-slot", "9935184599"); } g.setAttribute("data-ad-client", "ca-pub-1812626643144578"); g.setAttribute("data-alternate-ad-url", stroke2); document.getElementById("yandex_rtb_1").appendChild(g); (adsbygoogle = window.adsbygoogle || []).push({}); }})}); window.addEventListener("load", () => { var ins = document.getElementById("yandex_rtb_1"); if (ins.clientHeight == "0") { ins.innerHTML = stroke3; } }, true); </script> </div><!-- .entry-content --> </div><!-- .entry-content-wrapper --> </div> </article><!-- #post --> <nav class="navigation post-navigation" aria-label="Записи"> <h2 class="screen-reader-text">Навигация по записям</h2> <div class="nav-links"><div class="nav-previous"><a href="https://xn--90abhccf7b.xn--p1ai/css/overflow-css-wrap-overflow-wrap-css-cascading-style-sheets.html" rel="prev">Overflow css wrap: overflow-wrap — CSS: Cascading Style Sheets</a></div><div class="nav-next"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/skolko-programmistov-statistika-ottoka-it-speczialistov-iz-rossii-2022-god.html" rel="next">Сколько программистов: Статистика оттока ИТ специалистов из России (2022 год)</a></div></div> </nav><div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/css/css-placeholder-textarea-html-change-placeholder-text-color-of-textarea.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--90abhccf7b.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required>

Имя *

Email *

Сайт