How TO — Change Placeholder Color
Learn how to change the color of the placeholder attribute with CSS.
Placeholder Color
Step 1) Add HTML:
Use an input element and add the placeholder attribute:
Example
Step 2) Add CSS:
In most browsers, the placeholder text is grey. To change this, style the placeholder with the ::placeholder selector. Note that Firefox adds a lower opacity to the placeholder, so we use opacity: 1 to fix this.
Example
::placeholder <
color: red;
opacity: 1; /* Firefox */
>
Tip: Read more about the ::placeholder selector in our CSS Reference: CSS ::placeholder selector.
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
Change an HTML input’s placeholder color with CSS
Chrome v4 supports the placeholder attribute on input[type=text] elements (others probably do too). However, the following CSS doesn’t do anything to the placeholder’s value:
input[placeholder], [placeholder], *[placeholder]
Value will still remain grey instead of red . Is there a way to change the color of the placeholder text?
community wiki
Quick heads-up (not a solution, just a FYI): if I recall correctly, input[placeholder] just matches tags that have a placeholder attribute, it doesn’t match the placeholder attribute itself.
Apr 9, 2010 at 19:58
@MathiasBynens The :placeholder-shown pseudo-class matches an input element that is showing such placeholder text. So it matches tag, like input selector, but showing placeholder text just now. It also doesn’t match the placeholder attribute itself.
Jan 18, 2016 at 12:55
@HEX It’s not like the input selector because that selects all input elements. :placeholder-shown only selects input elements that are currently showing the placeholder, allowing you to style those elements only, and effectively style the placeholder text. What are you trying to say?
Jan 19, 2016 at 14:19
@HEX (Of course, it also selected textarea elements that are showing placeholder text.)
Jan 21, 2016 at 10:18
I can see no problem here . The placeholder’s text color is now red. Maybe other modern browsers now support it.
May 24, 2017 at 5:28
42 Answers 42
Implementation
There are three different implementations: pseudo-elements, pseudo-classes, and nothing.
- WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element: ::-webkit-input-placeholder . [Ref]
- Mozilla Firefox 4 to 18 is using a pseudo-class: :-moz-placeholder (one colon). [Ref]
- Mozilla Firefox 19+ is using a pseudo-element: ::-moz-placeholder , but the old selector will still work for a while. [Ref]
- Internet Explorer 10 and 11 are using a pseudo-class: :-ms-input-placeholder . [Ref]
- April 2017: Most modern browsers support the simple pseudo-element ::placeholder [Ref]
Internet Explorer 9 and lower does not support the placeholder attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.
The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the pseudo-element.
CSS selectors
User agents are required to ignore a rule with an unknown selector. See Selectors Level 3:
a group of selectors containing an invalid selector is invalid.
So we need separate rules for each browser. Otherwise the whole group would be ignored by all browsers.
::-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; >Usage notes
- Be careful to avoid bad contrasts. Firefox’s placeholder appears to be defaulting with a reduced opacity, so needs to use opacity: 1 here.
- Note that placeholder text is just cut off if it doesn’t fit – size your input elements in em and test them with big minimum font size settings. Don’t forget translations: some languages need more room for the same word.
- Browsers with HTML support for placeholder but without CSS support for that (like Opera) should be tested too.
- Placeholders are no replacement for labels, so make sure you have a label, too
- Some browsers use additional default CSS for some input types ( email , search ). These might affect the rendering in unexpected ways. Use the properties -webkit-appearance and -moz-appearance to change that. Example:
[type="search"]
4,934 2 2 gold badges 27 27 silver badges 51 51 bronze badges
answered Apr 9, 2010 at 20:36
63.1k 6 6 gold badges 54 54 silver badges 62 62 bronze badges
This answer could probably do with a revision to reflect the state of things, since the content and versions covered have not really been updated in 6 years, and vendors have largely stabilized in that time (not to mention IE is essentially not a thing anymore). If you want to do this, that would be great, although I don’t mind doing it if you’re OK with that.
Apr 18 at 16:28
Check these references :link, link
Aug 16 at 6:22
/* 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; >This will style all input and textarea placeholders.
Important Note: Do not group these rules. Instead, make a separate rule for every selector (one invalid selector in a group makes the whole group invalid).
community wiki
You may also want to style textareas:
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder < color: #FF9900; >input:-moz-placeholder, textarea:-moz-placeholder
community wiki
For Bootstrap and Less users, there is a mixin .placeholder:
// Placeholder text // ------------------------- .placeholder(@color: @placeholderText) < &:-moz-placeholder < color: @color; >&:-ms-input-placeholder < color: @color; >&::-webkit-input-placeholder < color: @color; >> 30.7k 22 22 gold badges 106 106 silver badges 131 131 bronze badges
answered Jun 6, 2013 at 8:47
1,821 1 1 gold badge 18 18 silver badges 10 10 bronze badges
Dec 16, 2020 at 12:10
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.
Specifically Chrome 9 and 10 do not support background-color , border , text-decoration and text-transform when styling the placeholder.
The full cross-browser comparison is here.
answered Feb 9, 2011 at 16:44
23.6k 6 6 gold badges 30 30 silver badges 47 47 bronze badges
// 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]
community wiki
This will work fine. DEMO HERE:
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
user6696028
answered Sep 14, 2013 at 12:52
Love Trivedi Love Trivedi
3,929 3 3 gold badges 20 20 silver badges 28 28 bronze badges
In Firefox and Internet Explorer, the normal input text color overrides the color property of placeholders. So, we need to
::-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
30.7k 22 22 gold badges 106 106 silver badges 131 131 bronze badges
answered Feb 14, 2013 at 21:11
Dionysios Arvanitis Dionysios Arvanitis
1,153 9 9 silver badges 11 11 bronze badges
CSS provides the ::placeholder pseudo-element.
Note that the .placeholder mixin from Bootstrap is deprecated in favor of this.
input::placeholder
When using autoprefixer the above will be converted to the correct code for all browsers.
community wiki
Thank you. I was looking for a one line solution, not the TL;DR answers above.
Mar 28, 2022 at 15:15
/* 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
community wiki
Now we have a standard way to apply CSS to an input’s placeholder : ::placeholder pseudo-element from this CSS Module Level 4 Draft.
community wiki
This works in Firefox 51. I’m just going to use this method; the other browsers will catch up soon enough for me (given that no functionality is broken if the to-be-standard style is not applied).
Feb 27, 2017 at 8:39
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.
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
I overwrite the opacity for 1, so it will be good to go.
community wiki
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).
$('[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(''); >>) >); Just load this JavaScript code and then edit your placeholder with CSS by calling this rule:
form .placeholder < color: #222; font-size: 25px; /* etc. */ >30.7k 22 22 gold badges 106 106 silver badges 131 131 bronze badges
answered Apr 14, 2013 at 2:28
Dragos Rizescu Dragos Rizescu
3,400 5 5 gold badges 32 32 silver badges 43 43 bronze badges
This is the old way of doing it, which I’ve used quite a bit. The disadvantage is that the placeholder text disappears when you focus. I’ve found this to be annoying when the UI doesn’t also include labels next to the input. Over the past several months I’ve started replacing this method with using placeholder text, which I think is a UX improvement.
Dec 10, 2013 at 19:31
The other problem with code like this is your serverside code has to deal with placeholder text as empty input, which has problems with edge cases where you want to enter a town called «Town». Instead of checking values against the placeholder text you should really use a data-modified flag on the input, and then clear the input on form submit if the flag is not set. And for AJAX interfaces you may not even have a form, so you should be able to associate an arbitrary submission event with the input. This is one of those really simple situations that isn’t.
INPUT — Изменение цвета текста/фона, Placeholder & AutoComplete
Рабочий способ изменения цвета поля ввода Input, Placeholder & Auto-Complete
Буду краток. И так.. в первом шаблоне находятся стандартные CSS настройки поля ввода input.
Изменение цвета фона тега input после заполнения
Подскажите, как изменить фон тега input, после его заполнения.
Изменение цвета фона текста в зависимости от значения
Здравствуйте уважаемые форумчане. Только начал изучать xml понадобилось сделать следующее: в.
Изменение цвета текста и фона в консольном приложении
Вопросик есть какая библиотека используется для подключения цвета в с++ цвет текста определённый.
767 / 323 / 157
Регистрация: 26.05.2016
Сообщений: 2,127
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
html> head> meta charset="utf-8"> title>background-clip/title> style> input /style> /head> body> input type='text' autocomplete="on" placeholder='привет я текст'> /body> /html>
Регистрация: 25.05.2015
Сообщений: 39
После того как пользователь сохраняет пароль(и.т.п) в браузере, цвет поля ввода меняется на светло оранжевый.
767 / 323 / 157
Регистрация: 26.05.2016
Сообщений: 2,127
Сообщение от BARMALEY1337 
После того как пользователь сохраняет пароль(и.т.п) в браузере, цвет поля ввода меняется на светло оранжевый.
ну и?
cверху свой цвет подставьте
input {color: yellow; background: red;}
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Изменение цвета текста/фона при консольном выводе
Доброго времени суток. Как изменить цвет фона/текста в консоли с++ в формате RGB? Я знаю, что есть.
Изменение цвета текста и фона при консольном выводе
Всем привет. Помогите решить мою проблему. Как менять цвет текста и фона при консольном выводе.
Изменение цвета фона текста RichEdit при нажатии на кнопку
У меня есть форма на которой есть кнопка и Richedit. У меня сделано так, что при нажатии на кнопку.
Исчерпывающее руководство по псевдоэлементам и псевдоклассам в CSS
Hola a todos! Всем привет! Будучи молодым веб-дизайнером я был вынужден учиться методом проб и ошибок. Тогда не было Smashing Magazine, Can I Use, CodePen или каких-то других замечательнх штук, доступных нам сегодня. Найти кого-то, кто мог бы показать фишки веба, особенно что касалось CSS, было невероятно полезно.
Теперь я немного оброс жирком опыта. И сегодня поделюсь с вами в очень дружелюбной, непринужденной и ненавязчивой манере всем, что касается псевдоклассов (ПК) и всевдоэлементов (ПЭ).
Если вы опытный веб-дизайнер или разработчик, то вы наверняка знаете и используете большую часть ПК и ПЭ, описанных в статье. Тем не менее, вы можете пробежаться по списку. Наверняка найдутся один или два пункта, о которых вы раньше не знали.
Перед тем как перейти к сути, и потому что это непосредственно относится к ПК и ПЭ, давайте начнем с основ: вы когда-нибудь задумывались что значит “псевдо”? Если так, то вот определение с Dictionary.com:
имя прилагательное
1. то, что подразумевается, но не имеется на самом деле; делать вид; ложный или поддельный; фиктивный.
2. почти, приближенное, или пытающееся быть.
Статья с определением на русском языке (примечание переводчика)
Не вдаваясь в технические подробности определения, данного консорциумом W3C, в основе псевдокласса лежит фантомное состояние элемента или его специфичная характеристика, управляемая через CSS. Несколько распространенных примеров псевдоклассов :link, :hover, :active, :first-child и :nth-child. На самом деле их гораздо больше и мы рассмотрим их чуть позже.
Кроме того ПК всегда начинаются с двоеточия (:). Затем идет имя ПК и иногда значение в скобках. Знакомы с :nth-child?
Перейдем к псевдоэлементам. Они являются виртуальными элементами, которыми мы можем манипулировать как обычными html-элементами. Разница в том, что ПЭ не существуют в дереве документа или DOM. Это значит что мы не пишем ПЭ в html-разметке, а создаем их при помощи CSS.
Примеры ПЭ :after, :before и :first-letter. Мы вспомним о них ближе к концу этой статьи.
Одинарное или двойное двоеточие для ПЭ?
Короткий ответ — в большинстве случаев подойдут оба написания.
Двойное двоеточие (::) было представлено в CSS3 для дифференциации таких псевдоэлементов, как ::before и ::after от псевдоклассов, например :hover и :active. Двойное двоеточие поддерживают большинство браузеров, включая Internet Explorer (IE) 8 и ниже.
Хотя некоторые ПЭ, такие как ::backdrop, требуют только двойного двоеточия.
Лично я использую одинарное двоеточие, это делает мой CSS-код обратно совместимым со старыми браузерами. Конечно же я использую написание с двойным двоеточием для тех ПЭ, которые этого требуют.
Вы в праве использовать оба варианта. В этом вопросе действительно нет однозначно правильного или неправильного ответа.
Тем не менее спецификация на момент написания этой статьи рекомендует использовать именно одиночное двоеточие по упомянутой выше причине обратной совместимости:
Пожалуйста, обратите внимание что в CSS3 новый способ написания ПЭ предусматривает двойное двоеточие, например a::after , для визуального отделения от ПК. Вы могли видеть такое написание в CSS. CSS3 тем не менее все еще поддерживает одиночное двоеточие ради обратной совместимости. И мы рекомендуем вам придерживаться подобного написания еще какое-то время.
В тексте этой статьи ПЭ, которые поддерживают как одинарное, так и двойное двоеточие будут показаны в обоих вариантах; ПЭ, требующие только двойного двоеточия, будут показаны как есть.
Когда (не) использовать CSS сгенерированное содержимое
Создание контента с помощью CSS достигается путем объединения свойства content и ПЭ :before или :after.
Этот “контент” может быть простым текстом или контейнером, которыми мы можем манипулировать при помощи CSS для отображения графических форм или декоративных элементов. Дальше я буду говорить о первом типе такого контента — тексте.
Сгенерированный контент не должен использоваться для важной информации или текста по следующим причинам:
- Он не будет доступен для большинства программ чтения с экрана.
- Его нельзя будет выделить.
- Если контент содержит избыточную декоративную информацию, программы чтения с экрана, которые поддерживают CSS content, будут читать его вслух. Это будет убийственно для UX.
Используйте сгенерированный контент в декоративных целях или для не особо важной информации. Но убедитесь что он правильно распознается программами чтения с экрана. Перед использованием этого инструмента “думайте прогрессивно”.
На Smashing Magazine есть великолепная статья об использовании сгенерированного контента CSS.
Экспериментальные псевдоклассы и псевдоэлементы
ПК или ПЭ считаются экспериментальными пока их спецификация не стабильна или не является финальной. Синтаксис и поведение могут изменится по ходу пьесы.
Тем не менее мы можем использовать экспериментальные ПК и ПЭ уже сейчас при помощи вендорных префиксов. Чтобы это сделать обратитесь к Can I Use и уточните, для каких ПК и ПЭ префиксы необходимы. А затем воспользуйтесь одним из инструментов автоматической установки префиксов, например -prefix-free или Autoprefixer.
В этой статье вы увидите пометку “экспериментальный” рядом с такими ПК или именами ПЭ.
Псевдоклассы
Мы начнем обсуждение с псевдоклассов, имеющих отношение к определенным состояниям.
ПК состояний обычно вступают в игру, когда пользователь выполняет определенное действие. “Действие” в CSS может так же означать “отсутствие действия”, например в случае со ссылками, по которым еще не было переходов.
Давайте рассмотрим их по порядку.
:link
:link это ПК, отвечающий за “нормальное” состояние ссылки и используется для выбора ссылок, которые еще не были посещены. Объявление :link перед всеми остальными ПК крайне желательно. Порядок всех четырех следующий :link, :visited, :hover, :active.
a:link color: orange;
>
Его так же можно опустить и писать так:
a color: orange;
>
:visited
:visited используется для стилей ссылок, по которым был переход. Позиция ПК :visited вторая по счету (после :link).
a:visited color: blue;
>
:hover
:hover используется для стилизации элементов, когда курсор пользователя находится над ними. Сфера использования этого ПК не ограничивается ссылками, хотя именно для них чаще всего применяется.
Этот ПК должен идти третьим в списке (после :visited).
a:hover color: orange;
>
:active
ПК :active используется для элементов, которые были “активированы” при помощи курсора или касанием для сенсорных устройств. Так же может сработать от нажатия клавиш на клавиатуре, так же как и :focus.
Работа этого ПК очень похожа на :focus, разница в том, что :active — событие, происходящее между моментом когда клавиша мыши была нажата и до момента, когда она была отпущена.
Этот ПК должен идти четвертым (после :hover).
a:active color: rebeccapurple;
>
:focus
ПК :focus используется для стилизации элементов, которые получили фокус при помощи курсора, тапа на тачскрине или при помощи клавиатуры. Часто используется для элементов формы.
a:focus color: green;
>
input:focus background: #eee;
>
Бонус: SASS миксины для ссылок
Если вы работаете с препроцессорами CSS, такими как SASS, этот бонус будет вам интересен.
Для оптимизации работы вы можете использовать миксины SASS для создания базового набора ссылок.
Идея, скрывающаяся за данными миксинами, в том, что состояния не объявлены по умолчанию. Поэтому мы “вынуждены” в дружественной форме объявить все четыре состояния ссылок.
:focus и :active ПК обычно пишутся вместе. Не стесняйтесь разделять их если вам угодно.
Обратите внимание, что эти миксины могут быть использованы для любого html-тега, не только для ссылок.
А вот и миксины:
@mixin links ($link, $visited, $hover, $active) & color: $link;
&:visited color: $visited;
>
&:hover color: $hover;
>
&:active, &:focus color: $active;
>
>
>
Применение:
a @include links(orange, blue, yellow, teal);
>
Компилируется в:
a color: orange;
>
a:visited color: blue;
>
a:hover color: yellow;
>
a:active, a:focus color: teal;
>