Как добавить скругленные уголки у текстового поля фиксированной ширины?

🕛 19.01.2009, 23:20

Текстовое поле всегда отображается в виде прямоугольника, поэтому для создания видимости поля со скругленными уголками, необходимо спрятать исходную рамку и подложить под поле рисунок в виде фона.

Вначале готовим изображение необходимой ширины и высоты в графическом редакторе (рис. 1).

Исходная рамка вокруг текстового поля скрывается с помощью атрибута border со значением none. Добавление поля происходит через атрибут background, в качестве значения указываем путь к рисунку и значение no-repeat, чтобы фон не повторялся. Также необходимо задать размеры рисунка и поля вокруг текста (пример 1).

Пример 1. Фон под текстовым полем

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1251"> <title>Текстовое поле</title> <style type="text/css"> INPUT.round { border: none; /* Убираем рамку */ background: url(images/bginput.png) no-repeat; /* Параметры фона */ width: 300px; /* Ширина поля */ height: 18px; /* Высота поля */ padding: 7px 10px; /* Поля вокруг текста */ } </style> </head> <body> <form action=""> <p><input type="text" class="round" maxlength="30"></p> <p><input type="submit" value="Отправить"></p> </form> </body>
</html>

Согласно спецификации CSS высота элемента складывается из значений height, padding и border. Поэтому эти атрибуты взаимосвязаны и при уменьшении их суммы ниже значения высоты рисунка может произойти «обрезание» его нижнего края. Для ширины это не так критично, поскольку стоит ограничение на ввод символов (параметр maxlength) и текст не превысит заданное рамкой ограничение.