Нестандартный вид текстовых полей
Изображения и фоновые рисунки позволяют легко изменить вид текстовых полей и кнопок для отправки формы на сервер. Как обычно, вначале требуется нарисовать желаемые элементы в графическом редакторе (рис. 1), а затем сделать отдельные изображения для каждого поля.
Рис. 1. Форма с нестандартными элементами
Начнём с однострочного текстового поля. Размеры картинки получились 328х46 пикселов, эти значения укажем в качестве ширины и высоты. Саму картинку ставим фоном с помощью свойства background. Изначально у текстового поля отображается рамка, чтобы она не портила вид её необходимо спрятать, задав свойство border со значением none (пример 1).
Пример 1. Текстовое поле
XHTML 1.0CSS 2.1IECrOpSaFx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Текстовое поле</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.user {
width: 308px; /* Ширина поля с учетом padding */
height: 46px; /* Высота */
background: #dad7c5 url(images/input.png) no-repeat; /* Фон */
padding: 0 10px; /* Поля */
border: none; /* Убираем рамку */
font-size: 1em; /* Размер текста */
line-height: 46px; /* Выравниваем по центру в IE */
}
</style>
</head>
<body>
<form action="">
<p><input type="text" class="user" value="Имя" /></p>
</form>
</body>
</html>Наше поле по высоте получается довольно большим по сравнению с полем по умолчанию, из-за этого возникают проблемы с выравниванием текста по центру в IE. Он будет выводиться по верхнему краю поля, что выглядит довольно небрежно. Для выравнивания используем свойство line-height со значением равным высоте поля заданным через height. На остальные браузеры это дополнение не окажет влияния, поэтому условными комментариями можно пренебречь.
Для многострочного текстового поля установка фона происходит аналогично. Но есть небольшое отличие — с правой стороны имеются кляксы, если мы вставим картинку фоном для <textarea>, то при появлении вертикальной полосы прокрутки она будет выводиться прямо по кляксам. При этом теряется эффект рамки. Поэтому фон добавим для блочного элемента, а <textarea> выведем уже в нём (пример 2).
Сюда же вставим и рисованную кнопку для отправки файла. Это делается через <input type="image">, в атрибуте src указываем путь к файлу, остальное браузер берет на себя.
Пример 2. Поле для ввода текста
XHTML 1.0CSS 2.1IECrOpSaFx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Текстовое поле</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.comment {
width: 347px; /* Ширина рисунка */
height: 176px; /* Высота рисунка */
background: #dad7c5 url(images/textarea.png) no-repeat; /* Фон */
}
.comment textarea {
border: none; /* Убираем рамку */
background: transparent; /* Прозрачный фон */
margin: 3px; /* Отступы от линии */
width: 318px; /* Ширина поля */
padding: 5px 0 5px 5px; /* Поля в тексте */
height: 160px; /* Высота */
}
</style>
</head>
<body>
<form action="handler.php">
<div class="comment"><textarea cols="10" rows="10"></textarea></div>
<p><input type="image" src="images/send.png" /></p>
</form>
</body>
</html>По умолчанию текстовое поле имеет белый цвет фона, что нам совершенно не требуется, поэтому в свойствах задаём его прозрачным через значение transparent.
Браузеры несколько по-разному выводят полосу прокрутки, но эти изменения не настолько существенны, чтобы придавать им значение. К примеру, вид формы в Opera показан на рис. 2.
Рис. 2. Поле для ввода текста
В браузерах примеры отображаются корректно, только следует учесть два момента.
- В Safari и Chrome к активным полям добавляется подсветка, которая сообщает о фокусе элемента. При использовании фоновых рисунков такая подсветка может «попортить» дизайн, поэтому от неё в некоторых случаях следует отказаться, добавив стилевое свойство outline со значением none к селекторам INPUT и TEXTAREA.
- В браузере IE7 наблюдается ошибка с фоном. Если в текстовом поле вводить текст, превышающий ширину поля, то фон начнёт смещаться. Можно ограничить длину текста, используя атрибут maxlength тега <input> или установить фон не для <input>, а для обрамляющего тега <div>, как это показано в примере 2. В IE8 эта ошибка исправлена.