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

В настоящее время я делаю переднюю часть сайта с looooads форм, все стилизованные и выглядящие довольно в 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>

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

Ответ 1

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

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

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

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

Щелчок по метке перенесет событие в файл в Chrome, IE и Safari.

Для Firefox требуется очень небольшое обходное решение, подробно описанное в этом ответе.

Ответ 2

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

Ответ 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;
});

Ответ 4

Customformsjs pluggin адресует эту проблему в своем классе модуля файлов.
http://customformsjs.com/doc/File.html

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

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

Ответ 5

Использовать чит-код (#) infront атрибута класса 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;
}