Стиль поля загрузки файла HTML

Question

Я пытаюсь создать поле для загрузки файла, которое имеет немного стиля, но у меня, похоже, возникают проблемы с поиском примеров этого. Я знаю, что отчасти причина в том, что само поле варьируется от браузера к браузеру.

Есть идеи, как это сделать? Или есть способ сделать это без использования элемента файла формы, который можно стилизовать?

Answer 1

Если вы имеете в виду текстовое поле для имен файлов, вы можете использовать селектор input [type = file] в файлах css. Например:

input[type=file] { background-color: red; }

Если вы имеете в виду диалоговое окно выбора файла, я думаю, что оно зависит от браузера / ОС, и вы мало что можете с этим поделать.

Answer 2

Я уже сталкивался с этой проблемой раньше.К сожалению, загрузки файлов практически невозможно согласовать в разных браузерах.Что касается CSS 2, я думаю, что стандарт W3C определенно оставляет поведение неопределенным - подумайте, сколько способов его нужно реализовать на разных платформах.Например, Firefox генерирует анонимные кнопки и элементы ввода внутри элемента загрузки файла, которые наследуют только некоторые свойства, заданные вами для самого элемента загрузки.

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

Answer 3

Вот несколько ссылок, которые я нашел:

Артикул QuirksMode

Одна статья в дополнительных пикселях (см. Раздел «Стиль ввода файла»)

Answer 4

Если вы используете jQuery, взгляните на этот плагин - https://github.com/ajaxray/bootstrap-file-field

Этот крошечный плагин будет отображать поле ввода файла в виде кнопки начальной загрузки (с настраиваемыми классами) и красиво отображать выбранные имена файлов (или ошибки выбора).

Кроме того, вы можете установить различные ограничения, используя простые атрибуты данных или настройки JS.
e, g, data-file-types="image/jpeg,image/png" ограничит выбор типов файлов, кроме изображений jpg и png.

Answer 5

Это подходит для вашего требования.