Как изменить цвет плейсхолдера css
How To Change the Color of an HTML5 Input Placeholder Using CSS
HTML5 has an attribute called placeholder . This attribute being used on the and elements provides a hint to the user of what can be entered in the field.
How to Set Color of the Placeholder Text
The default color of a placeholder text is light grey in most browsers. If you want to change it, you need to use the ::placeholder pseudo-element.
In the case you want to select the input itself when it’s placeholder text is being shown, use the :placeholder-shown pseudo-class.
The code example will look like the following.
Example of changing the color of the placeholder text:
Result
You can also change the text color, which will be filled in the place of placeholder. For that purpose, define a class for each element and give styling to it.
Example of setting different colors for the placeholder text:
It is important to remember that for each browser there is a different implementation way. For example,
- ::-webkit-input-placeholder pseudo-element for Chrome/Safari/Opera,
- ::-ms-input-placeholder pseudo-class for Edge (also supports webkit prefix).
The above pseudo-class and pseudo-element are necessary to handle the required result.
Placeholder Color
Utilities for controlling the color of placeholder text.
Class reference
Usage
Control the placeholder color of an element using the .placeholder- utilities.
Changing opacity v1.4.0+
Control the opacity of an element’s placeholder color using the .placeholder-opacity- utilities.
Responsive
To control the text color of an element at a specific breakpoint, add a : prefix to any existing text color utility. For example, use md:text-green-600 to apply the text-green-600 utility at only medium screen sizes and above.
For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.
Focus
To control the placeholder color of an element on focus, add the focus: prefix to any existing placeholder color utility. For example, use focus:placeholder-blue-600 to apply the placeholder-blue-600 utility on focus.
Focus utilities can also be combined with responsive utilities by adding the responsive : prefix before the focus: prefix.
Customizing
Placeholder Colors
By default Tailwind makes the entire default color palette available as placeholder colors.
You can customize your color palette by editing theme.colors in your tailwind.config.js file, or customize just your placeholder colors in the theme.textColor section.
Responsive and pseudo-class variants
By default, only responsive and focus variants are generated for placeholder color utilities.
You can control which variants are generated for the placeholder color utilities by modifying the placeholderColor property in the variants section of your tailwind.config.js file.
For example, this config will also generate hover and active variants:
Disabling
If you don’t plan to use the placeholder color utilities in your project, you can disable them entirely by setting the placeholderColor property to false in the corePlugins section of your config file:
How to change input element placeholder color in css
In this tutorial, we are going to learn about how to change the placeholder color in css using ::placeholder pseudo-element selector.
In css, we have the ::placeholder pseudo-element selector by using that we can change the placeholder color of an input or textarea element.
By default, user-agent styles the placeholder text color to light-grey.
Let’s see an example.
Html
Css
By default, firefox reduces the placeholder text opacity so that we have added opacity:1 to the firefox selector.
Псевдоэлемент ::placeholder
Псевдоэлемент ::placeholder позволяет стилизовать текст, который был вставлен используя атрибут placeholder для элементов форм, таких как input и textarea. Для стилизации данного псевдоэлемента вы можете использовать свойства: шрифтов и все что связано с оформлением текста, фона, внутренние отступы.
- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Примеры
В этом примере мы изменим цвет текста placeholder, а так же при :focus на input, мы плавно скроем placeholder, используя opacity и плавное изменение этого свойства через transition
Похожие публикации:
- Как сдвинуть текст в css
- Как сделать led эквалайзер в arduino
- Как сделать бесконечную анимацию css
- Как сделать боковое меню html css
Как изменить цвет текста в placeholder css
Чтобы изменить цвет текста в атрибуте placeholder, нужно использовать селектор ::placeholder и задать свойство color со значением нужного цвета. Вот пример кода:
input::placeholder color: #ff0000; /* Красный цвет */
>
Вы можете заменить #ff0000 на любой другой цвет в формате HEX (например, #00ff00 — зеленый) или использовать ключевое слово (например, red — красный).
Важно отметить, что не все браузеры полностью поддерживают этот селектор. Чтобы быть уверенным, что это будет работать во всех браузерах, рекомендуется использовать вспомогательный JavaScript или jQuery код для изменения цвета плейсхолдера.
Например, с помощью jQuery:
$(input).on(focus, function $(this).attr(placeholder, );
>).on(blur, function $(this).attr(placeholder, Ваш текст).css(color, #ff0000);
>);
Этот код удалит текст плейсхолдера при фокусе ввода, а затем восстановит его и установит красный цвет при снятии фокуса.
Будьте внимательны при изменении цвета плейсхолдера, чтобы не нарушить читаемость. Цвет должен быть достаточно контрастным, чтобы текст был хорошо виден.
Плейсхолдеры: виды и решения для применения
Плейсхолдеры появились давно. Это атрибут HTML5. Внешне выглядят как фразы или слова внутри формы для ввода данных. Плейсхолдеры подсказывают посетителю сайта, что нужно ввести в ту или иную строку. Судя по описанию, это полезный инструмент, но на самом деле все не так радужно.
Часто плейсхолдеры, наоборот, отпугивают посетителей сайта. Они не запоминают подсказки, так как те сразу пропадают, как только поставишь курсор мышки в строку. Многие и вовсе не видят текст плейсхолдера, так как он настолько блеклый, что ничего не разобрать. И это только часть минусов такого, казалось бы, полезного инструмента. Ниже мы приводим аргументы, чем он так плох и как выйти из положения.
Отличия плейсхолдера от лейбла и его виды
Для начала разберемся с понятием «плейсхолдер» — что это такое и чем отличается от лейбла. Данный термин происходит от английского слова placeholder и означает подсказку внутри поля веб-формы на сайте. Соответственно, этот элемент изначально предназначен для облегчения ввода пользовательских данных. Один из множества вариантов реализации — подсказка внутри поля «Пароль» (к примеру, «Не менее 8 символов»).
В идеале такая технология улучшает юзабилити веб-страницы с интерактивными формами. Однако при ее неправильном применении возникает обратный эффект: юзабилити ухудшается (возникают проблемы при заполнении полей). Как результат, теряется часть потенциальных клиентов.
Лейблы похожи на плейсхолдеры тем, что также помогают пользователю вводить правильные данные. Отличие заключается в расположении элементов: плейсхолдеры находятся внутри поля, а лейблы — снаружи. Собственно, отказ разработчиков от вторых в пользу первых обосновывается экономией места за счет сокращения размеров формы. Однако зачастую такое решение приводит к негативным последствиям.
Понятие «плейсхолдер» используется не только в интернет-маркетинге, но и в программировании. Правда, там оно имеет несколько другое значение. Под данным термином программисты понимают символ или совокупность символов, которые служат временным текстовым шаблоном перед заполнением поля актуальной информацией. К примеру, имеется лишь точное количество значений или переменных, но сами эти переменные и значения остаются неизвестными. В таких случаях вводится временный заполнитель, который затем будет заменен конкретными данными.
Часто эти шаблоны применяются при верстке сайтов с целью предварительной оценки выбранного шрифта и взаимного расположения текстового или графического контента на странице. Наиболее часто в качестве плейсхолдера используется фиктивный текст, начинающийся с латинских слов Lorem ipsum.
- Дополнение заголовка
Вариант совмещения заголовка с текстом-заполнителем считается наиболее грамотным. Заголовочная строка здесь видна пользователю все время. Плейсхолдер пропадает, как только посетитель начинает вводить в поле информацию.
В данном случае заполнитель используется вместо заголовка. Такое решение, являющееся наихудшим с точки зрения юзабилити, используется для уменьшения размеров формы и минимизации количества текста на странице.
7 причин не использовать плейсхолдеры, заменяющие лейблы
Иногда при верстке форм разработчики вместо лейблов используют текст плейсхолдера. HTML-страница в этом случае становится лаконичнее, упорядочивается текст, сокращаются размеры веб-формы. Однако такие благие намерения зачастую ухудшают качество сайта.
Приведем несколько главных причин, по которым менять лейблы на текст-заполнитель не следует.
-
Так как текст плейсхолдера пропадает при заполнении поля, пользователь вынужден помнить смысл этого текста в процессе ввода. Если форма достаточно объемная, посетитель, заполняя ее, часто забывает подсказку. Поэтому ему приходится стирать введенные данные, чтобы текст появился вновь. В некоторых случаях требуется еще и кликнуть на пустое пространство, переведя таким образом фокус с поля.
Идеальное юзабилити предполагает, что пользователь будет полностью сосредоточен на заполнении формы. Но посетители сайтов могут выполнять несколько задач одновременно: отвечать на почту или телефонный звонок, писать сообщение в мессенджере, отвлекаться на другие сайты и т. д. В случае сложного действия, возможно, придется прервать процесс для поиска нужного документа или номера заказа. Подобным пользователям Интернета свойственно часто отвлекаться в процессе работы. И дизайн сайта должен помогать им возвращаться к месту остановки.
Кейс: VT-metall
Узнай как мы снизили стоимость привлечения заявки в 13 раз для металлообрабатывающей компании в Москве
Рекомендуемые статьи по данной теме:
- План маркетинга компании: увеличиваем прибыль компании в 2 раза
- KPI для отдела продаж: как рассчитать и внедрить
- Как получить в 3 раза больше клиентов в 2 раза дешевле
3 проблемы юзабилити с плейсхолдером
Кроме описанных выше трудностей имеются также проблемы с юзабилити. Плейсхолдеры были внедрены сравнительно недавно, а потому эта технология имеет несколько существенных недостатков. Приведем три характерных примера:
- По умолчанию заполнитель выглядит как светло-серый текст внутри поля. Изменить цвет плейсхолдера, используя возможности CSS, в большинстве случаев не представляется возможным. Это достаточно существенная проблема в первую очередь для людей со слабым зрением, так как такой текст очень плохо читается на светлом фоне.
- Внедрение плейсхолдеров в форму заставляет пользователей напрягать краткосрочную память и требует от них повышенного внимания при заполнении. Людям, обладающим когнитивными расстройствами, это доставляет дополнительные проблемы и служит серьезным препятствием.
- Для слабовидящих и слепых существуют специализированные программы, озвучивающие текст на сайте. На сегодняшний день не все скринридеры способны адекватно воспринимать текст плейсхолдера, а значит, пользователи с проблемами зрения могут пропустить потенциально важную подсказку.
Подводные камни использования плейсхолдеров
Несмотря на перечисленные преимущества, при использовании плейсхолдеров важно помнить о некоторых нюансах. Расскажем о неочевидных на первый взгляд моментах.
Особенности при автопереводе страницы на другой язык
В некоторые браузеры (например, Chrome) встроены автоматические переводчики. Если пользователь активирует эту функцию, некоторые атрибуты страницы не переведутся. Во многих случаях это скорее хорошо, поскольку неточности перевода могут исказить структуру сайта.
Не обрабатываются переводчиком в том числе и плейсхолдеры. Если поле не снабжено дополнительным лейблом, подсказка внутри поля остается на языке оригинала. А пользователь, запросивший перевод, может не знать этот язык и не понимает в таком случае, что именно нужно вводить.
Иногда родной язык пользователя определяется системой по местонахождению устройства. И браузер предлагает на основе IP-адреса клиента перевести страницу. Но человек может использовать устройство на языке, отличном от родного. Веб-разработчикам и дизайнерам следует учитывать такие случаи, грамотно составляя семантику сайта.
Проблемы с цифровой грамотностью
Количество активных пользователей Интернета стремительно растет. Веб-дизайнеры призваны обеспечивать удобство пользования сайтами и приложениями для людей всех возрастов. Если человек впервые оказывается в Интернете вообще и на определенном ресурсе в частности, разработчики должны учитывать это.
Среди пользователей Сети появляется все больше людей в том числе преклонного возраста. Цифровая грамотность старшего поколения со временем растет, но также увеличивается количество проблем с доступностью, которые необходимо решать.
Безусловно, многие новички незнакомы с функцией подсказки внутри поля (не говоря уже о самом термине «плейсхолдер»). Видя такой текст, они считают поле уже заполненным и не понимают, что от них еще требуется и почему форма не отправляется.
Если поле является обязательным для заполнения, то страница просто-напросто не пустит пользователя дальше, сообщив об ошибке. Если же заполнять элемент ввода необязательно, есть риск не получить от пользователя какую-то важную информацию.
Удобство пользования
Вспомогательный заполнитель представляет собой обычный текст, чего порой бывает недостаточно для полной и понятной подсказки. Иногда приходится соответствующим образом менять стили плейсхолдера, добавлять дополнительные теги, иконки и прочие атрибуты.
Плейсхолдер также имеет ограничение по количеству символов строки, которое зависит от длины поля. Мобильные версии сайта зачастую сужают элемент ввода, скрывая тем самым часть подсказки.
Правильное использование плейсхолдеров
Внедряя текст-заполнитель в код сайта, необходимо помнить о важных принципах:
- плейсхолдер не является полноценной заменой лейблу;
- использовать данный элемент желательно лишь в простых формах (к примеру, для ввода имени пользователя и пароля);
- цвет фона нужно делать таким, чтобы заполнитель легко читался на нем;
- поддержка данной технологии реализована еще не на всех браузерах.
Идеальное решение в применении плейсхолдера
Текст-заполнитель размещается между лейблом и полем для ввода:
«Ваш ID сотрудника. Его можно найти в вашем рабочем профиле интранета. Пример: a1234567–89».
Что дает это решение:
- обеспечивается иерархия, связанная как визуально, так и структурно. Заголовок говорит о предназначении поля, далее идет подсказка для правильного заполнения с примером, и завершается блок пустым полем для ввода;
- плейсхолдер рассматривается браузером как обычный текст и при необходимости переводится на другой язык;
- пользователь не рассматривает текст-подсказку как уже введенные данные;
- текст-заполнитель легко читается даже в плохих условиях;
- подсказка не пропадет при заполнении поля;
- текст можно стилизовать инструментами CSS, а также наполнять семантическими тегами.
Плейсхолдер, пример которого мы разобрали, можно было бы разместить и под полем для ввода. Однако на мобильных устройствах в этом месте обычно возникает цифровая клавиатура, которая может скрыть часть подсказки:
Реализуется данное решение следующим кодом:
Можно заметить не очень большое отличие от стандартной связки for + id. Здесь label программно связан с элементом input через id, имеющий значение employee-id. В свою очередь между label и input расположен атрибут p, который служит заменой атрибуту placeholder.
У читателя может возникнуть вполне закономерный вопрос: «А не проще ли выполнить стилизацию плейсхолдера в виде заголовка?» Ведь тем самым мы избавляемся от лишней работы. Ответ на этот вопрос простой и логичный: разработчик должен упрощать жизнь не себе, а потенциальному посетителю.
Вернемся к коду. С помощью атрибута aria-describedby мы связываем элементы input и p, что можно использовать, чтобы задать алгоритм прочтения скринридером. В таком случае контент внутри тега p гарантированно будет читаться последним, а заголовок и данные, запрашиваемые от пользователя, озвучат в первую очередь.
Данное решение обеспечивает полноценную доступность сайта для людей с нарушением зрения. Программа, читающая текст, проинформирует незрячего пользователя, что именно от него требуется, и поможет при заполнении форм, озвучивая плейсхолдеры. Остальные посетители, не испытывающие серьезных проблем со зрением, получат абсолютно ту же информацию, просто прочитав ее.
Текст-заполнитель никак не привязывается к заголовку, поэтому им легко управлять. Например, можно указать скринридеру, чтобы он пропускал подсказки либо, наоборот, озвучивал каждую дважды. Если же сделать плейсхолдер частью заголовка, последний станет чересчур громоздким, трудно воспринимаемым на слух.
Реализация в виде кода:
Веб-форма играет важную роль в структуре сайта, напрямую влияет на конверсию сайта и в результате на прибыль владельца. Поэтому необходимо обеспечить ее доступность и понятность. Текст-подсказка укажет пользователю, какие вводить данные, но это будет полноценно работать лишь в комбинации с лейблами.
Как изменить при наведении текст формы?
как изменить, видимо плейсхолдер, при наведении. был инпут с плейхолдером «Name», а при наведении нужно сделать слово ТЕКСТ со своими стилями
Отслеживать
Victoria Pisareva
задан 30 июн 2019 в 10:44
Victoria Pisareva Victoria Pisareva
57 7 7 бронзовых знаков
Добавьте код и опишите как конкретно его нужно изменить (текст, размер, цвет)
30 июн 2019 в 10:51
@CbIPoK2513 я не особо понимаю как это реализовать. у меня обычный инпут с плейсхолдером, в макете при наведении плейсхолдер должен измениться на слово текст. вид плейсхолдера ниже в форме есть по стилизации
30 июн 2019 в 10:56
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
var input = document.querySelector('input'); var placeholder = input.placeholder; input.addEventListener('mouseover', () => < input.placeholder = 'новый текст' >) input.addEventListener('mouseout', () => < input.placeholder = placeholder; >)input < padding: 15px; border-radius: 20px; font-size: 20px; >input:hover::-webkit-input-placeholder < border-bottom: 2px solid blue; font-weight: bold; >input:hover::-moz-placeholder < border-bottom: 2px solid blue; font-weight: bold; >input:hover:-moz-placeholder
Отслеживать
ответ дан 30 июн 2019 в 11:07
1,118 1 1 золотой знак 9 9 серебряных знаков 21 21 бронзовый знак
я знаю как стилизовать плейсхолдер, мне нужно изменить его содержание при наведении
30 июн 2019 в 11:09
@Victoria Pisareva, так?
30 июн 2019 в 11:23
как? не вижу ничего
30 июн 2019 в 12:03
В смысле? Нажмите «выполнить код». Текст меняется и стилизуется
30 июн 2019 в 12:04
а как его сделать кроссбраузерным? у меня такое только в хроме срабатывает
30 июн 2019 в 13:35
На основе псевдоэлемента placeholder
input::placeholder input:-ms-input-placeholder input::-ms-input-placeholder input::-webkit-input-placeholder input:-moz-placeholder input::-moz-placeholder input:hover::placeholder input:hover:-ms-input-placeholder input:hover::-ms-input-placeholder input:hover::-webkit-input-placeholder input:hover:-moz-placeholder input:hover::-moz-placeholder
Отслеживать
ответ дан 30 июн 2019 в 11:10
23.6k 4 4 золотых знака 35 35 серебряных знаков 68 68 бронзовых знаков
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.