Поле ввода с закруглёнными краями на CSS 2

Использовал в одном проекте... никаких border-radius из CSS 3 или HTML-таблиц с картинками, только <DIV>'ы. Файл стиля таков:

/* Поле ввода с закруглёнными уголками */
.input_skin {
 float:left;
 display:inline;
 background:url(../img/inpbg.jpg) repeat-x;
 position:relative;
 height:21px;
 margin-left:5px;
}
/* margin-left:5px – как минимум 5px, чтобы левое закругление никуда не уплывало
display:inline; – обязательно, иначе будет некорректно отображаться в ie6 */ 
.input_left {
 position:absolute;
 background:url(../img/conl.png);
 width:5px;
 left:-5px;
 height:21px
}
.input {
 float:left;
 width:44px;
 display:inline;
 height:21px;
 border:none;
 background:none;
 padding-left:2px;
 font:normal 16px Arial;
 color:#545454;
}
.input_right {
 position:absolute;
 background:url(../img/conr.png);
 width:5px;
 left:100%;
 height:21px
}
/*этот стиль задаёт любую ширину*/
.width100 {
 width:280px !important
}

Обратите внимание, что пути из стиля к картинкам - относительные, то есть, папки css и img "лежат" на одном уровне.

Вывести поле из формы HTML можно, например, так:

<form name="f0">
 <div class="input_skin">
  <div class="input_left"></div>     
  <input class="input width100" type="text" name="email" value="Ваш E-mail" 
    title="Введите адрес E-mail и нажмите Enter" onClick="document.f0.email.value='';">
  <div class="input_right"></div> 
 </div> 
</form>

Получилось вот что (прикреплённые картинки - очень маленькие):

inpbg.jpg

conl.jpg

conr.jpg

 Скачать пример в архиве ZIP (13 Кб)

21.12.2011, 17:48 [13777 просмотров]