Die Größe der input type="file" Schaltfläche "durchsuchen" in firefox?

Ist es sowieso mit CSS oder JS, die Sie können die Größe des input type="file" Schaltfläche "Durchsuchen" in firefox?

Ich weiß, Sie können nicht ändern Sie den text der Schaltfläche, aber alles, was ich zu tun ist, machen Sie diese Taste, breiter für firefox. Also mit einem -moz css-Regel wäre perfekt.

InformationsquelleAutor Fostah | 2011-08-25

  1. 6

    Styling Datei-Eingabe-Tasten ist sehr begrenzt aus Gründen der Sicherheit. Es gibt einige workarounds, aber keine ist perfekt. Check out this post auf QuirksMode:

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

    InformationsquelleAutor Paulpro

  2. 6

    Edit: Wie andere schon angemerkt firefox nicht suuport die Methode unten, ich würde finden Sie auf den folgenden link, http://www.quirksmode.org/dom/inputfile.html

    Folgende ist eine ziemlich einfache Lösung. Ich würde raten, eine Klasse hinzufügen, um das label aber. Im Grunde haben Sie Stil-das label anstelle der Eingabe die Vermeidung von cross-browser-Probleme und-Breite und Höhe Fehler:

    <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/

    Das klappt perfekt. Ich landete Größenänderung mein Bild zu passen, die Größe der upload-button mit einem anderen Beispiel,aber das ist großartig! und sehr einfach!
    In Firefox können Sie nicht klicken Sie auf das Etikett für die Datei-Eingabe
    Im Firefox, wird der gesamte grüne Bereich ist nicht anklickbar, und nicht zeigen, ein Zeiger.

    InformationsquelleAutor William A

  3. 5

    Hier ist der Grundgedanke: http://www.quirksmode.org/dom/inputfile.html

    Und dies könnte hilfreich sein für die Größe Eingabebereich

    input{font-size: 100px;}

    Funktioniert gut für mich.

    Das funktioniert perfekt, um immer ein Zeiger.

    InformationsquelleAutor Yevgen

  4. 3

    Versuchen, diese: http://jsfiddle.net/CnHj5/
    Funktioniert in Firefox und einen schönen pointer-cursor zur Verfügung.

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

    InformationsquelleAutor gertas

  5. 2

    Webseiten, welche Sie oft tun, wenn Sie brauchen eine "angepasste" Datei-upload-widget: die "echte" Datei-upload-Feld ausgeblendet. Fügen Sie ein text-Feld zeigt den aktuellen Wert des Datei-upload-Feld und ein button ausgelöst werden soll Auswahl der Datei im Datei-upload-Feld. Hier ein Beispiel:

    <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">
    +1 Dies funktionierte perfekt für mich und scheint am einfachsten zu sein, schnelle Lösung. Dank

    InformationsquelleAutor Wladimir Palant

  6. 1

    Als für mich, Zhenya Shevchenko gab einer der am besten funktionierende Lösungen. Mit seiner Methode können wir erstellen cross-browser-Datei-Eingabe-Taste: 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*/
}

    InformationsquelleAutor Webars

Schreibe einen Kommentar