Zmiana rozmiaru przycisku przeglądania type = "file" w firefox?

Question

Czy mimo to przy użyciu CSS lub JS można zmienić rozmiar typu input = "file" Przycisk Przeglądaj w firefox?

Wiem, że nie można zmienić tekstu przycisku, ale wszystko, co trzeba zrobić, to przycisk szerszy dla Firefoxa. Używanie reguły -moz css byłoby idealne.

Answer 1

Przyciski wprowadzania plików stylów są bardzo ograniczone ze względów bezpieczeństwa. Jest kilka obejść, ale żadne nie są doskonałe. Sprawdź ten post Quirks Mode:

http://www.quirksmode.org/dom/inputfile.html

Answer 2

Edit: Jak inni zauważyli, firefox nie suuport metodę poniżej chciałbym odnieść się do poniższego linku http://www.quirksmode.org/dom/inputfile.html

Poniżej znajduje się dość proste rozwiązanie . Radziłbym jednak dodać klasę do etykiety. Zasadniczo styl etykietę zamiast wejścia unikając problemów przeglądarki krzyż i szerokość i wysokość bugów:

<label> 
    <input type=file> 
</label> 

CSS

label input{-moz-opacity:0 ;filter:alpha(opacity: 0);opacity: 0;} 
label {background:green;width:200px;height:100px;display:block; /* more styles here */} 

http://jsfiddle.net/DVLxp/

Answer 3

Jakie strony często zrobić, gdy potrzebujemy „niestandardowe” widżet przesyłania plików: pole "prawdziwe" do przesyłania plików jest ukryte. Dodaj pole tekstowe, które pokaże aktualną wartość pola przesyłania pliku i przycisk, który uruchomi wybór pliku w polu przesyłania pliku. Oto przykład:

<input id="file" type="file" style="display: none;" 
     onchange="document.getElementById('text').value = this.value;"> 

<input id="text" type="text" readonly><input type="button" 
     onclick="document.getElementById('file').click();" value="Choose file"> 

Answer 4

Oto główny pomysł: http://www.quirksmode.org/dom/inputfile.html

I to może być pomocne dla rozmiaru obszaru wprowadzania

input{font-size: 100px;} 

działa dobrze dla mnie.

Answer 5

Jeśli chodzi o mnie, Zhenya Shevchenko podała jedno z najlepszych rozwiązań roboczych. Korzystanie swoją metodę, możemy utworzyć plik wejściowy przycisk cross-Przeglądarka: http://jsfiddle.net/JHcFR/

<div class="fileInput"> 
    <input type="file" /> 
</div> 

.fileInput { 
    overflow: hidden; width: 500px; height: 200px; background: red; 
} 
.fileInput input { 
    font-size: 200px; opacity: 0; 
    float: right; filter: alpha(opacity=0); /*IE*/ 
} 

Answer 6

Spróbuj tego: http://jsfiddle.net/CnHj5/ Works w Firefox i miły wskaźnik kursora jest dostępna.

HTML:

<div class="upload"> 
    <input class="upload" type="file" /> 
</div> 

CSS:

input.upload { 
    -moz-opacity:0; 
    filter:alpha(opacity: 0); 
    opacity: 0; 
    position: absolute; 
    right:0; 
    font-size: 200px; 
    cursor: pointer; 
} 
div.upload { 
    background-color:green; 
    width:200px; 
    height:100px; 
    position: relative; 
    display:block; 
    overflow:hidden;}