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

Как в placeholder вставить * красного цвета?

вот ещё вариант правда с поддержкой браузеров я не уверен, оно даже через запятую не стало работать (по факту, только в chrome работает).

Отслеживать
11.5k 8 8 золотых знаков 42 42 серебряных знака 69 69 бронзовых знаков
ответ дан 20 фев 2014 в 6:33
18.1k 20 20 серебряных знаков 42 42 бронзовых знака

@eicto, мне понравилось ваше решение, из него узнал для себя кое-что новое. Жаль, что оно не поддерживается IE вообще.

20 фев 2014 в 6:47
20 фев 2014 в 6:49

@eicto, я проверял в IE 10, «плэйсхолдер» не пропадает при наборе текста. Пропадает только при повторной установке фокуса в input с текстом.

20 фев 2014 в 6:58
забавно, получается у них invalid не меняется при наборе, ну можно с focus совместить.
20 фев 2014 в 7:01

::-webkit-input-placeholder < /* WebKit browsers */ color: #999; >:-moz-placeholder < /* Mozilla Firefox 4 to 18 */ color: #999; >::-moz-placeholder < /* Mozilla Firefox 19+ */ color: #999; >:-ms-input-placeholder < /* Internet Explorer 10+ */ color: #999; >

$('#text').focus(function () < $('#hint').hide(); >); $('#text').blur(function () < if ($(this).val().trim() === '') < $('#hint').show(); >>);

input < width: 200px; >label

 Some text* 

Отслеживать
ответ дан 20 фев 2014 в 6:03
27.6k 5 5 золотых знаков 35 35 серебряных знаков 65 65 бронзовых знаков
cursor: text; для label и вообще замечательно
20 фев 2014 в 6:08
только зачем там js ?
20 фев 2014 в 6:20
JavaScript-ом заставляем div появляться и исчезать по событиям focus и blur input-а
20 фев 2014 в 6:23
@soledar10, решение без скрипта имеется. Ради интереса набросал пример.
20 фев 2014 в 6:33
в webkit(blink) оно умеет ::after после placeholder 🙂
20 фев 2014 в 7:03

Разметка

 
 Some text* 
 

Стили

.holder < height: 26px; position: relative; >.holder input, .holder label < position: absolute; top: 0; >.holder input < background: rgba(0, 0, 0, 0); height: 20px; padding-left: 3px; >.holder input:focus < background: #ffffff; >.holder label < height: 26px; left: 5px; line-height: 26px; z-index: -1; >.holder label > span

Отслеживать
ответ дан 20 фев 2014 в 6:33
19.9k 5 5 золотых знаков 44 44 серебряных знака 61 61 бронзовый знак

• javascript
• html
• css
• input
• placeholder

Важное на Мете

Связанные

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

В HTML5 к полям формы добавлен атрибут placeholder , который устанавливает замещающий текст. Такой текст отображается серым цветом и пропадает, когда поле получает фокус. Использование этого атрибута достаточно просто, следует только написать текст, всё остальное браузер берет на себя.

Серый цвет, используемый по умолчанию, выбран удачно, но не всегда вписывается в дизайн страницы, особенно если меняется цвет фона полей формы, как показано в примере 1.

Пример 1. Использование placeholder

HTML5 CSS 2.1 IE Cr Op Sa Fx

Для изменения цвета текста в атрибуте placeholder в Firefox применяется псевдокласс ::-moz-placeholder .

В Safari и Chrome стиль текста меняется следующим образом.

Таким образом, соединяя воедино этот стиль, получим страницу, одинаково работающую в браузерах Firefox, Safari и Chrome (пример 2).

Пример 2. Цвет текста

HTML5 CSS3 IE Cr Op Sa Fx

Браузеры «не любят» группировать такой стиль, поэтому мне пришлось для отдельных браузеров повторить конструкцию.

Теперь что касается других браузеров. Internet Explorer вообще не понимает атрибут placeholder и отказывается с ним что-либо делать, а Opera не умеет менять цвет текста через стили. Так что приведённый трюк работает только в Firefox, Safari и Chrome.

Как изменить цвет текста-подсказки в placeholder с помощью стилей CSS?

Многие из вас нередко сталкивались с формами, где в качестве подсказок есть подписи. Они пропадают при на наборе текста. Так вот — это атрибут placeholder, который есть у элементов, которые созданы для ввода текста (input). С помощью него можно задать текст, который будет отображаться как подсказка до начала ввода в данное поле. К сожалению, не все браузеры одинаково корректно работают с данным атрибутом. Устаревшие версии и вовсе данный текст не отображают.

Напомню, по статистике в Рунете устаревшими браузерами пользуется около 5% пользователей (это для очистки совести, если что). Надеюсь на ваших сайтах они не концентрируются)

Теперь рассмотрим как сделать так, чтобы решить нижеописанные проблемы:

1. Как изменить стили для плейсхолдера;
2. Как скрыть текст плейсхолдера не при вводе, а уже при нажатии на поле;
3. Что делать с браузерами, где в принципе не отображается placeholder.

Во всех примерах будем работать с полем input.

Как изменить цвет текста-подсказки в placeholder в input?

Давно уже не новость, что каждый браузер не только по-разному отображает placeholder, но и требует особых свойств для изменения стилей. И это я уже не говорю о соответствующих префиксах в написании. Давайте рассмотрим их.

По умолчанию во многих браузерах цвет подсказки — серый. В данном примере сделаем его чёрным.

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

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

Убираем placeholder при нажатии на поле

По умолчанию в браузерах текст из атрибута placeholder пропадает только после начала ввода, но есть и такие, кто хочет, чтобы этот текст не отвлекал уже на стадии нажатия на поле ввода. Чаще всего делают именно так. Для это нужна написать стили для фокуса, где цвет текста-подсказки станет полностью прозрачным, то есть его перестанет быть видно.

Можно даже настроить плавное изменение прозрачности или изменение цвета сss-анимацией. Но с кроссбраузерностью таких решений могут возникнуть проблемы.

А что делать с бразуерами, которые не поддерживают атрибут placeholder в input?

Ну точно не теряться) Да, действительно, такие браузеры есть. Например, IE8. И да, есть люди-адепты, которые будут им пользоваться всегда. Если нужна составить решение для всех посетителей, то наберитесь ещё немного терпения.

Для решения этой проблемы скачайте популярный для этого jquery плагин — jquery.placeholder. Ссылок давать не буду, так как сегодня-завтра они изменятся. Но, если что, можете скачать рабочий пример с плагином в — скачать исходники.

Подключаем его. Не стоит забывать, что нужен ещё и в принципе jquery подключить.

Оформление placeholder с помощью CSS стилей

У элементов ввода есть атрибут «placeholder». С его помощью можно вывести текст в поле ввода который исчезает при начале заполнения. Браузеры по разному отображают плейсхолдер, а устаревшие — вовсе не поддерживают. Однако, существуют способы обхода всех недостатков этого полезного атрибута. Рассмотрим следующие моменты:

• изменение стиля плейсхолдера;
• скрытие сразу при нажатии на поле;
• отображение в браузерах, которые не поддерживают атрибут.

Для примера возьмём текстовое поле input и будем применять к нему стили.

Изменение цвета placeholder

Браузеры на разных движках по разному отображают плейсхолдер. Чаще всего это чёрный текст с прозрачностью, что в итоге смотрится как серый. Чтобы изменить цвет и прозрачность необходимо в CSS стилях к элементам ввода указывать дополнительные директивы для движков браузеров. Изменим цвет на красный без прозрачности.

Если не указать «opacity», то цвет в браузерах, поддерживающих прозрачность, будет розовым. Так же можно указать для разных полей разные цвета. Для этого используйте классы.

Убираем placeholder при нажатии на поле

По-умолчанию браузеры скрывают плейсхолдер только после начала ввода текста. Но не сложно сделать чтобы он ичезал сразу после установки курсора в поле ввода. Для этого для полей с фокусом напишем стиль, в котором сделаем подсказку полностью прозрачной.

Скрывать плейсхолдер при форкусе можно по разному, например, плавно изменяя прозрачность или цвет. А можно настроить и css анимацию, когда подсказка будет плавно уезжать за пределы поля. Всё это возможно благодаря CSS, но большого смысла я в этом не вижу, так как кроссбраузерность таких прелестей будет страдать, а пользы от этих эффектов практически никакой.

Кроссбраузерность placeholder

Устаревшие браузеры не поддерживают атрибут «placeholder» — он просто не будет отображаться. К таким браузерам относится IE8. Несмотря на прекращение поддержки Internet Explorer, есть «люди» которые им пользуются. Если плейсхолдер не несёт важной информации, то можно забить на его отображение, но если увидеть содержимое подсказки должен каждый, то разработчик обязан позаботиться о полной кроссбраузерности.

Для отображени подсказки в браузерах, которые не поддерживают атрибут, будем использовать jquery плагин.

Скачиваем его и подключаем. Не забываем, что должна быть подключена так же jquery библиотека. Применяем плагин к элементам ввода с атрибутом «placeholder»:

Плагин срабатывает только если браузер не поддерживает плейсхолдеры. В таком случае элементам, к которым он применён, присваивается класс «placeholder», а в «value» записывается текст из атрибута «placeholder». При фокусе «value» очищается. Чтобы текст из атрибута не выглядел точно так же как вводимый текст, оформляем его с помощью стилей, опираясь на устанавливаемый класс. В примере цвет текста неактивного поля будет зелёным. Но увидеть это можно только в IE8 или других устаревших браузерах.

Css placeholder color или как изменить цвет placeholder css

Доброго времени, коллеги! Бывало ли у вас такое, что заказчик говорит что плохо виден текст в полях для заполнения формы? Более того, кто ведет свои блоги, знает, что цвет текста в input в комментариях всегда какой-то нечитаемый, блеклый, а браузер Mozilla и вовсе его «размазывает».

Css placeholder color

И поэтому сегодня, мы рассмотрим такой вопрос как изменить цвет placeholder при помощи css. Как по мне, решение внизу лучшее так как оно более валидно и не требует особых знаний в css, к тому же, добавить свой color к placeholder сможет каждый.

HTML: стандартная конструкция

Префиксы

Для всех современных браузеров достаточно использовать такую конструкцию.

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

Зачем столько кода, спросите вы! Много не мало! А если кроме шуток, то на данный момент этого еще нет в стандартах, и поэтому, в каждом браузере поддержка стилизации placeholder реализована по-своему.

Читайте также:

Трюк: изменение прозрачности

Вообще, существует несколько фишек по стилизации и «анимации» placeholder’а, но если есть необходимость чтобы проект прошел проверку на валидность, то не стоит такими фишками баловаться.

Плагин

А если уж совсем хочется или возможно требуется в разработке проекта, то обратите внимание на плагин по ссылке ниже. Он добавляет к полю лишь label имитируя плейсхолдер, который однозначно можно кастомизировать как душе угодно. Больше того, это даже будет работать в сафари, черт его побери…

Документация и демо

Пример на Codepen

На сегодня сеанс окончен, до встречи в следующей статье! Не делайте гуано-сайтов, не надо!

Похожие публикации:

1. Как работает map arduino
2. Как разместить блок по центру css вертикально
3. Как разместить элементы списка вертикально css
4. Как расположить картинку справа css

Как изменить цвет option select?

При публикации select, первый option имеет значение «—-» (генерится автоматом)
Данным скриптом поменял значение, но по оттенку оно отличается от placeholder инпута выше.

$('#sf1442558131n option:contains("----")').text('Район');

$('#sf1442558131n option:contains("Район")').css('color', '#ccc');

но он меняет цвет option только при выпадании списка.
Как сменить цвет дефолтному значению select?

• Вопрос задан более трёх лет назад
• 3062 просмотра

Как изменить цвет замещающего текста поля формы

Из этого туториала Вы узнаете, как изменить цвет замещающего текста ( placeholder text color) поля формы.

Замещающий текст поля формы содержит подсказку, которая указывает ожидаемые данные в поле. Это может быть пример или краткое описание ожидаемой информации. Краткая подсказка отображается в поле до того, как пользователь начнёт вводить данные.

По умолчанию, замещающий текст светло-серый (таким его отображают браузеры). Для того чтобы добавить к этому тексту пользовательские стили, Вам нужно будет использовать браузерные префиксы для свойств CSS.

Для того чтобы изменить цвет замещающего текста, следуйте таким инструкциям:

Составьте код в соответствии со следующей информацией (обратите внимание, что Вам необходимо добавить один и тот же код 4 раза для каждого браузерного префикса):
Этот код изменит цвет замещающего текста для полей ввода следующих типов: текст, поиск, ссылка, телефон, адрес электронной почты, и пароль:

input::-webkit-input-placeholder < color: red !important; >input:-moz-placeholder < /* Firefox 18- */ color: red !important; >input::-moz-placeholder < /* Firefox 19+ */ color: red !important; >input:-ms-input-placeholder

Следующий код изменит цвет замещающего текста для текстовой области (text area) (где, как правило, вводится основное сообщение контактной формы):

textarea::-webkit-input-placeholder < color: green !important; >textarea:-moz-placeholder < /* Firefox 18- */ color: green !important; >textarea::-moz-placeholder < /* Firefox 19+ */ color: green !important; >textarea:-ms-input-placeholder

Следующий код изменит цвет замещающего текста для отдельного типа ввода, в нашем случае — адрес электронной почты (email):

input[type=»email»]::-webkit-input-placeholder < color: blue !important; >input[type=»email»]:-moz-placeholder < /* Firefox 18- */ color: blue !important; >input[type=»email»]::-moz-placeholder < /* Firefox 19+ */ color: blue !important; >input[type=»email»]:-ms-input-placeholder

Выберите файл, в который Вы добавите код. Вы можете добавить его в любой файл CSS вашего сайта, но мы приготовили для Вас список файлов, в которые рекомендуется добавлять правила CSS для разных типов движков сайтов:

Шаблоны CMS:

• Темы WordPress (Темы WooCommerce/Jigoshop) /wp-content/themes/themeXXXXX/style.css
• Шаблоны Joomla (Шаблоны VirtueMart) /templates/themeXXXX/css/template.css
• Темы Drupal /sites/all/themes/themeXXX/css/style.css
• Шаблоны Web (HTML5) /css/style.css

Шаблоны E-commerce:

• Темы Magento /skin/ frontend /default/themeXXX/css/styles.css
• Темы PrestaShop /themes/themeXXXX/css/global.css
• Темы OpenCart /catalog/view/theme/themeXXX/ stylesheet / stylesheet .css
• Темы ZenCart /includes/templates/themeXXX/css/ stylesheet .css
• Шаблоны osCommerce /css/ stylesheet .css
• Шаблоны Shopify style.css.liquid

Вы можете также ознакомиться с детальным туториалом ниже:

Эта запись была размещена в Работа с CSS и помечена как color, css, input, placeholder, text. Добавьте в закладки постоянную ссылку.