Бързо публикуване на текст със заоблени ъгли

По-долу ще покажа кода на тестово поле за въвеждане на малко количество информация (фамилия, телефонен номер, количество), полето трябва да може да променя ширината си (не височината!) и трябва да лежи на произволен фон. Решението е кросбраузър. Трябват ви само три снимки.

3 снимки:

bg r l

.input_skin float:left; дисплей: вграден; background:url(img/bg.jpg) repeat-x; позиция: относителна; височина:21px; margin-left:5px > /* margin-left:5px - най-малко 5px, така че лявото закръгляне да не изплува никъде display:inline; - задължително, в противен случай няма да се показва правилно в ie6 */

.input_left позиция: абсолютна; фон:url(img/l.png); ширина:5px; ляво:-5px; височина:21px >

.input float:left; ширина:44px; дисплей: вграден; височина:21px; граница:няма; фон: няма; padding-left:2px; шрифт: нормален 16px Arial; цвят:#545454 >

.input_right позиция: абсолютна; фон:url(img/r.png); ширина:5px; ляво: 100%; височина:21px >

/*този стил задава произволна ширина*/

.width100 ширина:100px! важно >

добре, за правилното показване на png в ie6, не забравяйте за хака

В Chrome, когато щракнете върху въвеждане, се появява рамка. Не разбирам защо... Но си струва border:none;

Интересен пример, бих искал да видя как да го направя без снимки и как да закръгля рамката, която се появява, когато полето е активно.

---