Вопрос о стилизации <input type=«file» /> настолько стар, что наверное только ленивый не пробовал собственную реализацию этого, несомненно, важного в web дизайне элемента.
Однако, в большинстве своём, решения очень не однозначны и зачастую предлагают примерно следующие варианты:
А во втором случае мы имеем ряд не удобств связанные с активацией flash элементов (например в IE), а лично у меня (и думаю у всех, кто в ФФ использует Add Block Plus дополнение) кнопочка block совсем не красит флешевый инпут файл.
Где то пол года назад верстая очередной проект и столкнувшись с вопросом стилизации файл инпутов я нашёл отличную статью на хабре. Однако после некоторых манипуляций, пришлось отказаться от такого способа. И в первую очередь из-за того, что скрытые элементы никуда не делись и сильно мешали своим невидимым телом другим элементам.
И тогда пришла в голову простая мысль — не нужно блокировать не нужные части файл инпута, если можно просто ограничить пространство в котором этот инпут размещён.
Собственно вот очень коротенький пример как этого добиться:
CSS
HTML
* Source code was highlighted with Source Code Highlighter.
Пример можно посмотреть тут.
Хочу отметить, что <div> контейнер, абсолютно свободно может располагаться там, где нужно Вам, нет никаких обязательных float=«left» или position=«absolute», а так же нет никаких лишних блокирующих элементов.
Из минусов отмечу пожалуй то, что ширину кнопки желательно ограничивать шириной кнопки Browse у файл инпута в IE, то есть 74px.
UPD: Спасибо tenshi, всё гениальное — просто. Чтобы активная область была нужных размеров, достаточно задать бОльший размер шрифта для файл инпута и увеличить ширину контейнера (ну и естественно увеличить Вашу картинку для стилизации).
Однако, в большинстве своём, решения очень не однозначны и зачастую предлагают примерно следующие варианты:
- Наложить файл инпут поверх картинки и сделать его прозрачным.
- Использовать flash.
А во втором случае мы имеем ряд не удобств связанные с активацией 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», а так же нет никаких лишних блокирующих элементов.
UPD: Спасибо tenshi, всё гениальное — просто. Чтобы активная область была нужных размеров, достаточно задать бОльший размер шрифта для файл инпута и увеличить ширину контейнера (ну и естественно увеличить Вашу картинку для стилизации).