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

Question

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

Answer 1

Quirksmode.org имеет интересную статью об этом: http://www.quirksmode.org/dom/inputfile.html

Answer 2

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

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

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

Answer 3

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

РЕДАКТИРОВАТЬ: оказывается, что это больше не работает по соображениям безопасности.небольшой хак - просто установить стиль 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);
    });
});

Answer 4

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

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

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