• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Оформление placeholder с изменением текста (Цвет замещающего текста placeholder при помощи CSS)
Оформление placeholder с изменением текста
Kosten
Дата: Пятница, 2018-12-14, 20:52 | Сообщение 1
Администраторы
Сообщений:19239
Награды: 56


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

В этом примере возьмём текстовое поле input и закрепим к нему стили.

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



HTML

Код
<input type="text" placeholder="Начните вводить текст" value="">


CSS

Код
  ::-webkit-input-placeholder {color:#f11010; opacity:1;}/* webkit */
  ::-moz-placeholder          {color:#f11010; opacity:1;}/* Firefox 19+ */
  :-moz-placeholder           {color:#f11010; opacity:1;}/* Firefox 18- */
  :-ms-input-placeholder      {color:#f11010; opacity:1;}/* IE */
  

PS - Вдруг не был указан «opacity», то цветовая палитра в браузерах больше всего розовым станет. Но здесь изначально можно указать цветовую гамму для разного поля с разным оттенком.

Демонстрация

CSS

Код
.input-1::-webkit-input-placeholder { color: #ce0d0d; }
.input-2::-webkit-input-placeholder { color: #0a8c0a; }


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

Все браузеры по умолчанию должны скрывать placeholder, что можно увидеть, только когда начнешь печатать текст Но можно сделать сделать так, чтоб он исчезал сразу, как только навели курсор и сделали клик, что надпись исчезает. Здесь нужно прописать стиль, что подсказку сделает полностью прозрачной.



CSS

Код
  :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 */


Скрытие placeholder при наведение можно сделать по разному, как пример, это плавно изменяя прозрачность или палитру цвета.

Демонстрация
Прикрепления: 2649833.png(1.1 Kb) · 0631664.png(1.3 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Оформление placeholder с изменением текста (Цвет замещающего текста placeholder при помощи CSS)
  • Страница 1 из 1
  • 1
Поиск: