Jak mogę ustawić styl w polu wejściowym pliku w przeglądarce Firefox?

Question

Obecnie robię front end dla strony z looooads form, wszystkie stylizowane i wyglądające ładnie w IE, ale właśnie zauważyłem, że w Firefoksie pola wprowadzania plików nie odpowiadają żadnym z moich stylów, wszystkie inne rodzaje pól wejściowych są w porządku. Sprawdziłem to w Firebug i powiązałem z nim odpowiednie style, ale nie zmieniałem ich wyglądu.

Jeśli to nie jest kompletny mózg w moim imieniu, to czy jest to znany problem w Firefoksie? A jeśli tak, to jak ja tego nigdy wcześniej nie zauważyłem?

Oto przykład kodu.

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> 

Próbowałem zostały również stosowanie klasy do niego, ale to nie działa.

Answer 1

Użyj kodu oszukiwać (#) frontem do atrybutu klasy css powiedzieć:

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; 
} 

Answer 2

Firefox może być posiekany pomocą HTML atrybut rozmiaru wejścia: size = "40" podczas korzystania szerokość css kontrolować pełną szerokość pola + przycisk w układzie

Answer 3

Wiele z powyższych odpowiedzi jest dość starych. W 2013 roku znacznie prostsze rozwiązanie istnieje: prawie wszystkie bieżące przeglądarek ...

• Chrome
• IE
• Safari
• Firefox z kilku linii naprawić

przechodzą przez kliknij wydarzenia od etykiet. Wypróbuj go tutaj: http://jsfiddle.net/rvCBX/7/

• Style <label> jakkolwiek chcesz przesyłanie plików być.
• Ustaw atrybut for="someid" na etykiecie
• Utwórz element <input id="someid">, który jest ukryty.

Kliknięcie etykiety spowoduje przejście zdarzenia do pliku w Chrome, IE i Safari.

Firefox requires a very small workaround, which is detailed in this answer.

Answer 4

Wtyczka Customformsjs rozwiązuje ten problem na swojej klasie modułu plików.
http://customformsjs.com/doc/File.html

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

basicaly to uczynić możliwe rodzaj pól wejściowych do typu pliku z pewnymi ograniczeniami. Działa poprzez zawinięcie go w pojemniku i uczynienie go przezroczystym, więc kliknięcie na nim.Strona demo pokazuje go w akcji

Answer 5

Powiedzmy masz swój wkład:

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

Tworzenie fałszywy przycisk za pomocą jQuery.

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

Styl powyższego przycisku, jak tylko chcesz. Następnie:

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