Швидкий пост input text із закругленими кутами

Нижче я покажу код тестового поля для введення невеликої кількості інформації (Прізвища, Телефону, Кількості), поле має вміти змінювати свою ширину (не висоту!), і має лягати на будь-який фон. Рішення кросбраузерне. Потрібно лише три картинки.

3 Зображення:

bg r l

.input_skin float:left; display:inline; background:url(img/bg.jpg) repeat-x; position:relative; height:21px; margin-left:5px > /* margin-left:5px — як мінімум 5px, щоб ліве закруглення нікуди не спливало display:inline; — обов'язково, інакше буде некоректно відображатись у ie6 */

.input_left position:absolute; background:url(img/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(img/r.png); width:5px; Left: 100%; height:21px >

/*цей стиль ставить будь-яку ширину*/

.width100 width:100px! important >

ну і для коректного відображення png в ie6 не забуваємо про хак

У Хромі при натисканні на інпут з'являється бордер. Не зрозумію, чому… Варто ж border:none;

Цікавий приклад, хотілося б подивитися, як зробити це без картинок і як закруглити ту рамку, яка з'являється, коли поле активно.

---