<input type="file"> - пользовательские стили/css

Есть ли способ сделать <input type="file"> выглядеть одинаково во всех браузерах с помощью CSS?

Ответы

Ответ 2

попробуйте это -

  • Возьмите нормальный элемент и поместите его в элемент с позиция: относительная.
  • К этому же родительскому элементу добавьте нормальный и изображение, которое имеют правильные стили. Должность эти элементы абсолютно, так что они занимают то же место, что и .
  • Установите z-индекс в 2, чтобы он лежал на верхней части стилизованного ввода/изображения.
  • Наконец, установите непрозрачность  до 0. Теперь становится эффективно невидимый, и стили ввод/изображение светит, но вы все еще можно нажать "Обзор", кнопка. Если кнопка расположена поверх изображения пользователь появляется щелчок по изображению и получает стандартный выбор файла окно. (Обратите внимание, что вы не можете использовать видимость: скрытая, потому что по-настоящему невидимый элемент неприступен, тоже, и нам нужно, чтобы они оставались кликабельными) До сих пор эффект может быть достигается благодаря чистому CSS. Однако, одной функции по-прежнему не хватает.
  • Когда пользователь выбрал файл, видимое, поддельное поле ввода должно показать правильный путь к этому файлу, как нормальный бы. Это просто вопрос копирование нового значения на поддельный вход поле, но для этого нам нужен JavaScript это.

Подробнее - http://www.quirksmode.org/dom/inputfile.html

Ответ 3

Вы можете попробовать использовать swfupload, проект с открытым исходным кодом, в который встроен крошечный Flash файл на странице, а не входной файл... Вы можете использовать CSS для стилизации кнопки, которая запускает загрузку Flash, но вы хотите.

Даунсайд: с ним может быть сложно работать, и, конечно же, у ваших пользователей должна быть вспышка.

Потенциал: несколько файлов можно выбрать сразу в диалоговом окне загрузки!

Ответ 4

вы можете просто создать собственную кнопку ввода файла. просто установите атрибут CSS вашего элемента ввода style="display:none" и обработайте событие click в javascript. дальнейшее чтение: Использование скрытых элементов ввода файла с помощью метода click()

EDIT: выясняется, что это больше не работает по соображениям безопасности. немного взломать - просто установить стиль css на visibility:hidden. Вот JSFiddle, где я помещаю свое поле <input> где-то в конце моей страницы и запускаю openFileDialog с помощью элемента <a>.

//html
<input id="openFileDialog" type="file" id="files" name="files[]" accept=".json, .txt" />

//js
$("#openFile").on("click", function () {
    //throws an error if browser doesn't support file upload
    checkFileApiCompatibility();

    //opens File Dialog
    $("#openFileDialog").click();
    $("#openFileDialog").on('change', function(){
        openFile(this);
    });
});