it-swarm.com.ru

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

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

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

29
Wayne Austin

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

  • Хром
  • IE
  • Сафари
  • Firefox с исправлением нескольких строк

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

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

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

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

42
mikemaccana

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

4
ppostma1

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

<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;
});
3
Gaurav Gupta

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

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

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

0
Mitermayer Reis