Заполнитель текста в поле ввода только с CSS (без JavaScript)
Вместо того, чтобы маркировать каждое поле в форме, иногда предпочтительно (с точки зрения дизайна) иметь текст-заполнитель в каждом поле. Например, вместо этого:
----------------------------------
Full Name: | |
----------------------------------
у вас есть это:
----------------------------------
| Full Name |
----------------------------------
Когда вы нажимаете на поле, текст исчезает, и вы можете написать все, что вы хотите. Если вы пропустите поле без ввода текста, заполнитель появится снова.
Я видел, что это сделано многими способами, но все методы включают JavaScript. Например, Twitter делает достойную работу на своихстраница регистрации но если Javascript отключен, вы в конечном итоге набираете свое имя над словом «полное имя».
Я ищу способ только для CSS, который работал бы даже с отключенным JavaScript. Единственное потенциальное решение, которое я нашел, - это установить фон<input>
пометить изображение нужного текста, а затем использоватьinput:focus
псевдокласс, чтобы очистить фоновое изображение, когда кто-то нажимает на текстовое поле. Кажется, это работает, но было бы неплохо не использовать изображения.
Кто-нибудь знает хороший ресурс о том, как это сделать?