Оформить placeholder

1-ый способ: сменить цвет

Оформить placeholder можно через свойство ::placeholder.

/* Chrome, Opera */
::-webkit-input-placeholder { color: green; }

/* Firefox */
::-moz-placeholder { color: green; }

/* IE 10 и выше */
:-ms-input-placeholder { color: green; }

Стоит обратить внимание, что нельзя объединять эти селекторы.

/* Код работать не будет, т.к. селекторы объединены */
::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder { color: green; }

Пример кода:

2-ой способ: убирать текст

Когда выбирается текстовое поле, то «placeholder» остаётся на месте, пока не начинается заполняться текстовое поле. Чтобы убирать «placeholder», можно применить следующий CSS-код:

::-webkit-input-placeholder { opacity: 1; transition: opacity 0.3s ease; }
::-moz-placeholder          { opacity: 1; transition: opacity 0.3s ease; }
:-ms-input-placeholder      { opacity: 1; transition: opacity 0.3s ease; }

:focus::-webkit-input-placeholder { opacity: 0; }
:focus::-moz-placeholder { opacity: 0; }
:focus:-ms-input-placeholder { opacity: 0; }

Параметр transition делает плавным исчезновение «placeholder» (если браузер поддерживает это свойство).

Пример кода: