<rmcreative>

RSS

Свой 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

  1. №6604
    Oleg
    Oleg 08.09.2012, 9:54:08

    Пример стилизации всё таки больше плох чем хорошо. Пропадает обратная связь. Как пользователю понять что файл выбран и выбран именного тот?

  2. №6606
    Вадим Макеев
    Вадим Макеев 08.09.2012, 13:13:48

    Очень не рекомендую использовать числа, вроде «стопицот» или -100000px, как в этом примере. У всех браузеров есть ограничения по тем числам, которые они могут принять и применить к блокам. Иногда браузеры не уводят блок дальше, чем сколько-то там, а иногда сбрасывают значение до нуля. Безопасным я бы назвал четырёхзначные значения в пикселях, т.е. 9999px (но не 9999em, что значит, как минимум, умножение на 16px)

    В качестве примера: раньше в Opera максимальное значение было 32-с-чем-то тысяч пикселей. Я сталкивался с похожим ограничением и для Webkit, и для остальных браузеров.

  3. №6607
    Давид Мзареулян
    Давид Мзареулян 08.09.2012, 13:24:17

    А ещё одно время было очень популярно значение −999px. А потом появились мониторы с разрешением под 2500px, и вся эта красота повылазила.

  4. №6608
    Dzio
    Dzio 08.09.2012, 13:41:17

    А еще слухи ходили, что на сайты с использованием в css минус-сколько-там-пикселей гугль бан ставил :))

  5. №6609
    Sam
    Sam 08.09.2012, 16:03:18

    Да, тут лучше всего, конечно, добавить контейнер с overflow: hidden и выдвинуть input[type=file] за него.

  6. №6611
    GreLI
    GreLI 08.09.2012, 21:31:04

    Лучше использовать opacity:0 вместо left:-100000px; (фильтр для IE). Вариант хорош, но не сработает в некоторых браузерах если одновременно используется метод JS form.submit().

    input с overflow:hidden не сработает в тех же IE, может ещё где, так не помню.

  7. №6612
    Максим
    Максим 08.09.2012, 22:00:56

    2Sam, А так не пробовал ?:

    <label for="input" id="placer">+</label>
    <input type="file" id="input" name="input">

    css:

    #input {
    display:none;
    }
     
    #placer {
    color:green;
    padding:10px;
    }
    #placer:hover {
    }

    Об этом даже упомянали в прошлой заметке.

  8. №6613
    Sam
    Sam 09.09.2012, 0:05:04

    GreLI, не, не input с overflow:hidden, контейнер. А input точно так же сдвинуть.

    Про form.submit() не понял.

    Максим, не будет работать с display:none или visibility:hidden.

  9. №6616
    Максим
    Максим 09.09.2012, 14:42:13

    2Sam, на сколько я понял, проблема тока в ff, из-за него собственно и все костыли. Можно вместо display:none поставить overflow:hidden;position:relative; род. контейнеру, а на сам input: position:absolute;left:-100%; должно сработать

  10. №6617
    Sam
    Sam 09.09.2012, 17:41:20

    Максим, именно так выше и сделано :)

  11. №6621
    JS-coder
    JS-coder 10.09.2012, 17:22:47

    Oleg, document.getElementById('file').onchange=function(){ console.log(this.value); // file name }

  12. №6956
    Богдан
    Богдан 01.11.2012, 12:43:04

    Первый раз натолкнулся на решение с <label>, поэкспериментирую, спасибо, очень полезно )

  13. №8144
    Анто
    Анто 09.07.2013, 21:18:56

    С visibility:hidden работает во всех браузерах. Я делал visibility:hiddenи with: 1px и куда нибудь в уголок его где небудет мешать)

  14. №8207
    Николай
    Николай 29.07.2013, 11:36:39

    Насколько я знаю, click для input file не поддерживается старыми firefox. Или я какую-то хитрость упустил?

  15. №8517
    Дмитрий
    Дмитрий 30.10.2013, 18:58:09

    Я так и не нашел нормального решения этой проблемы

  16. №8803
    Сергей
    Сергей 08.02.2014, 17:58:49

    А в каких браузерах не работает с display:none? У меня работает спс за рецепт

  1. Почта опубликована не будет.

  2. Можно использовать синтаксис Markdown или HTML.

  3. Введите ответ в поле. Щёлкните, чтобы получить другую задачу.