Как мне оформить поле ввода файла в Firefox?

Question

В настоящее время я делаю внешний интерфейс для сайта с множеством форм, все стилизованы и выглядят симпатично в IE, но я только что заметил, что в Firefox поля ввода файлов не отвечают ни одному из моих стилей все остальные типы полей ввода в порядке. Я проверил его в Firebug и связал с ним правильные стили, но не изменил его внешний вид.

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

Вот пример кода.

CSS:

form.CollateralForm input,
form.CollateralForm textarea
{
    width:300px;
    font-size:1em;
    border: solid 1px #979797;
    font-family: Verdana, Helvetica, Sans-Serif;
}

HTML:

<form method="bla" action="blah" class="CollateralForm">
   <input type="file" name="descriptionFileUpload" id="descriptionFileUpload" />
</form>

Я также пытался применить к нему класс, но это тоже не работает.

Answer 1

Многие из приведенных выше ответов довольно стары. В 2013 году существует гораздо более простое решение : почти все современные браузеры ...

• Chrome
• IE
• Safari
• Firefox с исправлением нескольких строк

пройти через события клика от ярлыков. Попробуйте здесь: http://jsfiddle.net/rvCBX/7/

• Введите <label> так, как бы вы хотели, чтобы ваш файл был загружен.
• Установить for="someid" атрибут на этикетке
• Создайте <input id="someid"> элемент, который скрыт.

При щелчке по метке событие передается в файл для загрузки в Chrome, IE и Safari.

Firefox требует очень маленького обходного пути, который подробно описан в этом ответе .

Answer 2

Firefox можно взломать с помощью атрибута размера ввода HTML: размер = "40" при использовании ширины CSS для управления полной шириной поля + кнопка в макете

Answer 3

Допустим, у вас есть ваш ввод:

<input style="display:none" id="js-choose-file" type="file">

Создание фальшивой кнопки с помощью jQuery.

<a id="js-choose-computer" href="javascript:void(0);">From Computer</a>

Стиль кнопки выше, как вам нравится. Тогда:

$("#js-choose-computer").on("click", function() {
  $("#js-choose-file").click();
  return false;
});

Answer 4

Плагин Customformsjs решает эту проблему в своем классе файловых модулей.
http://customformsjs.com/doc/File.html

http://customformsjs.com/doc/File.js.html

В основном это позволяет сортировать поля ввода Файла с некоторыми ограничениями. Он работает, оборачивая его в контейнер и делая его прозрачным, чтобы вы нажимали на него. Демонстрационная страница показывает это в действии

Answer 5

Использовать чит-код (#) перед атрибутом класса css говорят:

form.CollateralForm input,
form.CollateralForm textarea
{
    width:300px;  //for firefox
    #width:200px; //for IE7
    _width:100px; //for IE6
    font-size:1em;
    border: solid 1px #979797;
    font-family: Verdana, Helvetica, Sans-Serif;
}