Как изменить шрифт placeholder css

 .form-input::placeholder  color: gray;> .form-input::placeholder  color: gray; >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку "Как понять" Скопировано

Как пишется

Скопировать ссылку "Как пишется" Скопировано

Два двоеточия и ключевое слово placeholder .

Стиль применится ко всем подсказкам на странице:

 ::placeholder  color: gray;> ::placeholder  color: gray; >    Скопировать Скопировано Не удалось скопировать   

Стиль применится только к подсказкам у полей ввода с классом email - input :

 .email-input::placeholder  color: darkblue;> .email-input::placeholder  color: darkblue; >    Скопировать Скопировано Не удалось скопировать   

Подсказки

Скопировать ссылку "Подсказки" Скопировано

�� Для стилизации подсказки можно использовать только следующие свойства:

• все шрифтовые свойства, начинающиеся с font (например, font - size или font - style );
• все свойства для работы с фоном, начинающиеся с background - (например, background - color или background - size );
• свойство color ;
• свойства word - spacing , letter - spacing , text - decoration , text - transform и line - height ;
• свойства text - shadow , группу свойств text - decoration и vertical - align .

На практике

Скопировать ссылку "На практике" Скопировано

Денис Ежков советует

Скопировать ссылку "Денис Ежков советует" Скопировано

�� Желательно стилизовать подсказку таким образом, чтобы визуально она отличалась от введённого текста. Как правило, её делают полупрозрачной, либо просто светлее вводимого текста.

Стили для placeholder

Можно менять почти любые свойства CSS, которые относятся к тексту - размер шрифта, начертание(жирный, наклонный), цвет и так далее. Эти стили повлияют только на placeholder, стили текста в input и textarea не будут затронуты.

CSS для input

input::-webkit-input-placeholder < /* Chrome/Opera/Safari */ color: #000; opacity: 1; >input::-moz-placeholder < /* Firefox 19+ */ color: #000; opacity: 1; >input:-ms-input-placeholder < /* IE 10+ */ color: #000; opacity: 1; >

CSS для textarea

textarea::-webkit-input-placeholder < /* Chrome/Opera/Safari */ color: #000; opacity: 1; >textarea::-moz-placeholder < /* Firefox 19+ */ color: #000; opacity: 1; >textarea:-ms-input-placeholder < /* IE 10+ */ color: #000; opacity: 1; >

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

Также можно прописать стили placeholder при фокусе input или textarea, чтобы получить, например, такой эффект:

Посмотреть этот пример можно на codepen

Как поменять font в placeholder?

Здравствуйте ребята, и вот вопрос. В хтмл есть тег input type="text", он выводит текстовую форму, и есть textarea, как поменять шрифт именно текст подсказки(placeholder)?

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

Комментировать

Решения вопроса 1

Shit happens

::-webkit-input-placeholder < color:#f00; font-family: Georgia;>::-moz-placeholder < color:#f00; font-family: Georgia;>:-ms-input-placeholder < color:#f00; font-family: Georgia;>:-moz-placeholder

Ответ написан более трёх лет назад

Оформление placeholder разными стилями

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

Атрибут required и псевдокласс invalid

При добавлении атрибута required к полю формы , начинает работать псевдокласс :invalid , который действует если поле не заполнено. Так работает первый вариант:

 
*
  
e-mail
  
(8 символов)
 

CSS:

.placeholder-box < display: block; position: relative; margin: 20px 0; >.placeholder-box input < display: block; box-sizing: border-box; width: 100%; height: 35px; line-height: 35px; padding: 0 10px; font-size: 14px; font-weight: 400; color: #495057; background-color: #fff; border: 1px solid #ced4da; border-radius: 5px; >.placeholder-text < display: none; width: 100%; line-height: 37px; position: absolute; left: 10px; top: 0; bottom: 0; color: #888; cursor: text; user-select: none; >.placeholder-box input:invalid + .placeholder-text