input стиль

Советы, заготовки. Верстка. HTML, CSS, JavaScript.
Ответить
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург

input стиль

Сообщение Александр »

input стиль

input-l.png - левая часть инпута
input-bg.png - середина импута
input-r.png - правая часть импута

В коде высота 21px, ширина картинок по краям - 5px.

Код: Выделить всё

<style>.input_skin {    float:left;    display:inline;    background:url(images/input-bg.png) repeat-x;    position:relative;    height:21px;    margin-left:5px}/* margin-left:5px – как минимум 5px, чтобы левое закругление никуда не уплывалоdisplay:inline; – обязательно, иначе будет некорректно отображаться в ie6 */.input_left {    position:absolute;    background:url(images/input-l.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(images/input-r.png);    width:5px;    left:100%;    height:21px}/*этот стиль задаёт любую ширину*/.width100 {    width:100px !important}</style> <div class="input_skin" >    <div class="input_left" ></div>    <input class="input width100" type="text" />    <div class="input_right" ></div></div>
http://naikom.ru/blog/archives/1234
Ответить