Поля, или элементы формы, input type=”text” являются самыми распространенными элементами, предназначенными для ввода информации. Область их применения достаточно велика: поисковые, регистрационные и прочие формы, требующие однострочного ввода текстовой информации.
Сегодня стандартное оформление текстовых полей Input – большая редкость, поскольку его внешний вид слабо вписывается в современные стандарты дизайна.
Атрибуты, влияющие на внешний вид
Среди всех атрибутов данного элемента на внешний вид влияют только:
- placeholder – значение, которое по умолчанию отображается в текстовом поле, до начала ввода,
- size – ширина текстового поля в символах моноширинного шрифта, влияет на максимальное количество видимых в поле символов, по умолчанию равен 10.
|
1 2 |
<input type="text" size="20" placeholder="это placeholder"> <input type="text" size="30" value="size равен 30, значения более 30 символов скрыты"> |
Свойства CSS, определяющие внешний вид
Условно все свойства CSS элемента input можно разделить на две группы, определяющие формат рамки поля ввода и формат текста.
Свойства CSS рамки и поля ввода:
- background: можно использовать как цвет, так и картинку,
- border/border-radius,
- box-shadow, при желании можно добавить тень, что придаст элементу объем: box-shadow: 5px 5px 10px #555.
- outline:none, убирает рамку, появляющуюся при активации поля (при установке курсора), или меняет ее внешний вид.
Свойства CSS текста поля input
Здесь можно менять все, что вашей душе угодно и применимо к тексту: шрифт, цвет, размер, стиль, насыщенность, декоративное оформление. Вариантов несметное количество:
Пример #1
Поисковая форма
