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>