Как задать стиль текста placeholder в форме с помощью CSS

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

Использование псевдоэлемента ::placeholder

Самый простой способ задать стиль текста placeholder — это использование псевдоэлемента ::placeholder. Вот пример кода:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: red;
}
::-moz-placeholder { /* Firefox 19+ */
  color: red;
}
:-ms-input-placeholder { /* IE 10+ */
  color: red;
}
:-moz-placeholder { /* Firefox 18- */
  color: red;
}

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

Использование класса для стилизации placeholder

Вы также можете использовать класс, чтобы стилизовать текст placeholder. Вот пример кода:

<input type="text" class="form-input" placeholder="Введите имя">

.form-input::placeholder {
  color: red;
  font-size: 18px;
}

Здесь мы задаем класс «form-input» для поля ввода формы и используем псевдоэлемент ::placeholder, чтобы задать стиль для текста placeholder. Мы задали цвет текста в красный цвет и установили размер шрифта 18px.

Использование псевдокласса :focus для стилизации placeholder

Еще один способ стилизовать текст placeholder — это использовать псевдокласс :focus. Этот способ позволяет задать разные стили для текста placeholder в зависимости от того, активно поле ввода или нет. Вот пример кода:

.form-input::placeholder {
  color: red;
  font-size: 18px;
}
.form-input:focus::placeholder {
  color: blue;
  font-size: 20px;
}

Здесь мы задаем класс «form-input» для поля ввода формы и используем псевдоэлемент ::placeholder и псевдокласс :focus, чтобы задать стиль для текста placeholder. Мы задали цвет текста в красный цвет и размер шрифта 18px для неактивного поля ввода, и цвет текста в синий цвет и размер шрифта 20px для активного поля ввода.