BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Рецепты CSS » Как добавить или изменить CSS стиль в «input» для «placeholder»

Как добавить или изменить CSS стиль в «input» для «placeholder»

2016-10-22 / Вр:22:08 / просмотров: 996

Приветствую читателей блога BlogGood.ru!
Часто в HTML форму в поле «input» прописывают «placeholder».
В «placeholder» вставляют временный текст-подсказку, который исчезнет при вводе текста пользователем.
Так вот, на этот текст-подсказку, который выводится при помощи «placeholder»,  я и покажу, как добавлять свои CSS стили, точнее, покажу, как поменять цвет, размер текста и выбрать другой шрифт.

Начнем!

Если у вас нет готового поля с «placeholder» для примера, я его пропишу (скопируйте себе):

<input type="text" name="fio" placeholder="Текст placeholder" />

Результат:
Как добавить или изменить CSS стиль в «input» для «placeholder»

Сейчас временный текст-подсказка сероватого цвета. А чтобы придать тексту «placeholder»  свой стиль, нужно прописать всего пару строк.
Откройте CSS и вставьте вот эти строки:

/* для Webkit браузеров (Chrome, Safari, Opera) */
input::-webkit-input-placeholder{
color: #cc0000; /* цвет текста */
font-style: italic; /* наклон текста */
font-weight: bold; /* текст будет жирным */
}

/* для браузеров Mozilla Firefox */
input:-moz-placeholder{
color: #cc0000; /* цвет текста */
font-style: italic; /* наклон текста */
font-weight: bold; /* текст будет жирным */
}

Результат:

Как добавить или изменить CSS стиль в «input» для «placeholder»

Надеюсь, в коде все понятно, там ведь есть подсказки. Но, если возникнут вопросы, пишите…
Удачи!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

2 Ответов на комментарий - Как добавить или изменить CSS стиль в «input» для «placeholder»

  1. Александр

    Интересный пост Степан. Полезный в том смысле, что к примеру если есть обязательные поля для заполнения то текст можно выделить красным, ну и плюс звездочку влепить как обычно. Чисто для новичков как сделать так чтоб в одном поле был текст одного цвета а в обязательном другого?! Все просто, добавляем к обязательным полям класс и через него прописываем, а к другим полям добавляем другой класс и опять через него пишем другие стили. Думаю пояснил понятно.
    Спасибо за пост Степа, честно никогда об этом не задумывался.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Спасибо, Саша, за комментарий!

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 704
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3821