И ещё немного о input file

Вопрос о стилизации <input type=«file» /> настолько стар, что наверное только ленивый не пробовал собственную реализацию этого, несомненно, важного в web дизайне элемента.
Однако, в большинстве своём, решения очень не однозначны и зачастую предлагают примерно следующие варианты:

• Наложить файл инпут поверх картинки и сделать его прозрачным.
• Использовать flash.

При этом, в первом случае, чтобы всё работало относительно одинаково во всех браузерах, предлагается «спорные области» — те что в одном браузере являются активными для нажатия, а в другом неактивными — закрыть, например, наложив сверху <div></div>. Стоит ещё добавить, что тут же используется значительное количество css со всяческими отрицательными отступами и float`ами.
А во втором случае мы имеем ряд не удобств связанные с активацией flash элементов (например в IE), а лично у меня (и думаю у всех, кто в ФФ использует Add Block Plus дополнение) кнопочка block совсем не красит флешевый инпут файл.

Где то пол года назад верстая очередной проект и столкнувшись с вопросом стилизации файл инпутов я нашёл отличную статью на хабре. Однако после некоторых манипуляций, пришлось отказаться от такого способа. И в первую очередь из-за того, что скрытые элементы никуда не делись и сильно мешали своим невидимым телом другим элементам.
И тогда пришла в голову простая мысль — не нужно блокировать не нужные части файл инпута, если можно просто ограничить пространство в котором этот инпут размещён.

Собственно вот очень коротенький пример как этого добиться:

CSS

<style type=«text/css»>
#file {
position:relative; top:0px; left:0px;
padding:0px; margin:0px;
text-align:right;
background:URL(./file.jpg) no-repeat;
width:65px; height:20px; overflow:hidden;
}

#file input {
height:20px;
position:absolute; right:0px;
opacity: 0; filter: alpha(opacity=0);
}
<style>

HTML

<div id=«file»><input type=«file» name=«myFile» /></div>

* Source code was highlighted with Source Code Highlighter.

Пример можно посмотреть тут.

Хочу отметить, что <div> контейнер, абсолютно свободно может располагаться там, где нужно Вам, нет никаких обязательных float=«left» или position=«absolute», а так же нет никаких лишних блокирующих элементов.
Из минусов отмечу пожалуй то, что ширину кнопки желательно ограничивать шириной кнопки Browse у файл инпута в IE, то есть 74px.
UPD: Спасибо tenshi, всё гениальное — просто. Чтобы активная область была нужных размеров, достаточно задать бОльший размер шрифта для файл инпута и увеличить ширину контейнера (ну и естественно увеличить Вашу картинку для стилизации).