Заполнитель текста в поле ввода только с CSS (без JavaScript)

Вместо того, чтобы маркировать каждое поле в форме, иногда предпочтительно (с точки зрения дизайна) иметь текст-заполнитель в каждом поле. Например, вместо этого:

             ----------------------------------
Full Name:  |                                  |
             ----------------------------------

у вас есть это:

 ----------------------------------
| Full Name                        |
 ----------------------------------

Когда вы нажимаете на поле, текст исчезает, и вы можете написать все, что вы хотите. Если вы пропустите поле без ввода текста, заполнитель появится снова.

Я видел, что это сделано многими способами, но все методы включают JavaScript. Например, Twitter делает достойную работу на своихстраница регистрации но если Javascript отключен, вы в конечном итоге набираете свое имя над словом «полное имя».

Я ищу способ только для CSS, который работал бы даже с отключенным JavaScript. Единственное потенциальное решение, которое я нашел, - это установить фон<input> пометить изображение нужного текста, а затем использоватьinput:focus псевдокласс, чтобы очистить фоновое изображение, когда кто-то нажимает на текстовое поле. Кажется, это работает, но было бы неплохо не использовать изображения.

Кто-нибудь знает хороший ресурс о том, как это сделать?

Ответы на вопрос(5)

Ваш ответ на вопрос