Свой input[type=file] 2
8 сентября 2012
Нашлось ещё одно решение проблемы стилизации input[type=file]
, о которой я уже писал. Прошлое решение не требует JavaScript для самой подмены кнопки, но всё-равно требует его для эмуляции hover и title.
Второе решение требует минимума JavaScript, точно работает в IE7+, Opera, Chrome, Safari, FF, никак не ограничивает в стилизации кнопки и изначально не имеет проблем с hover и title:
+
document.getElementById('trigger').onclick = function(){ document.getElementById('file').click(); }
Ну и немного CSS:
#file { // уводим input[type=file] подальше за экран position: absolute; left: -100000px; } #trigger { // исключительно внешний вид кнопки // на вкус и цвет border: 1px solid #ccc; background: #eee; color: #060; font-size: 30px; line-height: 1; padding: 20px; cursor: pointer; text-align: center; width: 40px; }
За идею и тестирование в IE дружно говорим спасибо creocoder-у.
Комментарии RSS по email OK
Пример стилизации всё таки больше плох чем хорошо. Пропадает обратная связь. Как пользователю понять что файл выбран и выбран именного тот?
Очень не рекомендую использовать числа, вроде «стопицот» или -100000px, как в этом примере. У всех браузеров есть ограничения по тем числам, которые они могут принять и применить к блокам. Иногда браузеры не уводят блок дальше, чем сколько-то там, а иногда сбрасывают значение до нуля. Безопасным я бы назвал четырёхзначные значения в пикселях, т.е. 9999px (но не 9999em, что значит, как минимум, умножение на 16px)
В качестве примера: раньше в Opera максимальное значение было 32-с-чем-то тысяч пикселей. Я сталкивался с похожим ограничением и для Webkit, и для остальных браузеров.
А ещё одно время было очень популярно значение −999px. А потом появились мониторы с разрешением под 2500px, и вся эта красота повылазила.
А еще слухи ходили, что на сайты с использованием в css минус-сколько-там-пикселей гугль бан ставил :))
Да, тут лучше всего, конечно, добавить контейнер с
overflow: hidden
и выдвинутьinput[type=file]
за него.Лучше использовать
opacity:0
вместоleft:-100000px;
(фильтр для IE). Вариант хорош, но не сработает в некоторых браузерах если одновременно используется метод JSform.submit()
.input с
overflow:hidden
не сработает в тех же IE, может ещё где, так не помню.2Sam, А так не пробовал ?:
css:
Об этом даже упомянали в прошлой заметке.
GreLI, не, не
input
сoverflow:hidden
, контейнер. Аinput
точно так же сдвинуть.Про
form.submit()
не понял.Максим, не будет работать с
display:none
илиvisibility:hidden
.2Sam, на сколько я понял, проблема тока в ff, из-за него собственно и все костыли. Можно вместо
display:none
поставитьoverflow:hidden;position:relative;
род. контейнеру, а на сам input:position:absolute;left:-100%;
должно сработатьМаксим, именно так выше и сделано :)
Oleg, document.getElementById('file').onchange=function(){ console.log(this.value); // file name }
Первый раз натолкнулся на решение с
<label>
, поэкспериментирую, спасибо, очень полезно )С visibility:hidden работает во всех браузерах. Я делал visibility:hiddenи with: 1px и куда нибудь в уголок его где небудет мешать)
Насколько я знаю, click для input file не поддерживается старыми firefox. Или я какую-то хитрость упустил?
Я так и не нашел нормального решения этой проблемы
А в каких браузерах не работает с display:none? У меня работает спс за рецепт