Если Вы задались целью стилизовать такой инпут, то наверняка уже пошарили по просторам интернета и нашли 101 способ сделать это. Смею предположить, что раз уж Вы продолжаете поиски, то ни один из вариантов Вам не пришелся по вкусу. Видимо все способы были либо громоздкими либо непонятными.
В свое время я так же задался целью изменить стандартный вид этого элемента. Несколько дней штурмовал различную литературу и интернет ресурсы, но к сожалению ничего дельного так и не нашел. Подключать ради такой мелочи кучу фреймворков и плагинов к ним не было никакого желания. Вот поэтому пришлось методом проб и ошибок разработать свой метод. Нового я ничего не придумал, но вот объединить несколько удачных моментов в одно решение по-моему получилось.
Предположим, что нам требуется убрать текстовое поле и оставить только кнопку «Обзор» данного элемента. Помимо этого мы так же хотим, чтобы кнопка была выполнена с помощью картинки.
Идея состоит в том, чтобы создать слой размером ровно с картинку-кнопку. В этом слое расположим стандартный элемент «input file» большего размера чем сам слой. Делаем стандартный элемент невидимым, позиционируем его абсолютно над картинкой и все.
Схематично это выглядит так:
Создаем слой, в него помещаем стандартный инпут и картинку с кнопкой.
Прописываем всего лишь два стиля:
Вот мы и получили кнопку без текстового поля. Если немного изменить код, то можно также добавить стилизованное текстовое поле, но в этом случае потребуется пара строк JS кода, чтобы отобразить путь к файлу в этом поле.
Я протестировал этот код в IE6, FF3, FF4, Safari5,Chrome11
По-моему решение вполне элегантное, не накладывает каких либо жестких ограничений.
Вероятнее всего такой код кто-то уже додумался использовать, но я не смог найти, поэтому и появился данный пост.
В свое время я так же задался целью изменить стандартный вид этого элемента. Несколько дней штурмовал различную литературу и интернет ресурсы, но к сожалению ничего дельного так и не нашел. Подключать ради такой мелочи кучу фреймворков и плагинов к ним не было никакого желания. Вот поэтому пришлось методом проб и ошибок разработать свой метод. Нового я ничего не придумал, но вот объединить несколько удачных моментов в одно решение по-моему получилось.
Предположим, что нам требуется убрать текстовое поле и оставить только кнопку «Обзор» данного элемента. Помимо этого мы так же хотим, чтобы кнопка была выполнена с помощью картинки.
Идея состоит в том, чтобы создать слой размером ровно с картинку-кнопку. В этом слое расположим стандартный элемент «input file» большего размера чем сам слой. Делаем стандартный элемент невидимым, позиционируем его абсолютно над картинкой и все.
Схематично это выглядит так:
Создаем слой, в него помещаем стандартный инпут и картинку с кнопкой.
<div id="my-button">
<input type="file" name="myfile" id="file-button" />
<img src="imgs/button_14.gif" width="126" height="24" alt="Обзор..." />
Прописываем всего лишь два стиля:
#my-button{
width:126px; //размеры нашей картинки
height:24px; // --- == ---
position:relative;
overflow:hidden;
}
#file-button{
filter:alpha(opacity=1);
-moz-opacity: 0.01;
opacity: 0.01;
cursor:pointer;
font-size:72px;
position:absolute;
right:0;
}
Вот мы и получили кнопку без текстового поля. Если немного изменить код, то можно также добавить стилизованное текстовое поле, но в этом случае потребуется пара строк JS кода, чтобы отобразить путь к файлу в этом поле.
Я протестировал этот код в IE6, FF3, FF4, Safari5,Chrome11
По-моему решение вполне элегантное, не накладывает каких либо жестких ограничений.
Вероятнее всего такой код кто-то уже додумался использовать, но я не смог найти, поэтому и появился данный пост.