Festlegen einer einheitlichen <Eingabetyp="Datei"> Breite in allen Browsern

Welche Kombination von CSS oder Attributen wird benötigt?

Antwort auf "Festlegen einer einheitlichen <Eingabetyp="Datei"> Breite in allen Browsern " 3 von antworten

  • Das eigentliche Steuerelement
  • ein DIV mit den gewünschten Steuerelementen und Stylingen

ausblenden Die Schaltfläche ist kein Standard-HTML-Steuerelement.

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

was ist los mit

<input type="file" size="50" .... />

? Wird gleich aussehen außer Safari auf Mac ich erraten (auf mac, alle Upload-Steuerelemente sieht anders aus, auf allen Browsern)

http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

Wenn Sie das eigentliche Steuerelement ausblenden, denken Sie daran, dass es sehr wichtig ist, die Deckkraft des Steuerelements auf Null zu setzen und nicht tatsächlich visibility: hidden. Doing that will actually hide the element, disabling the click action. zu verwenden. Wenn Sie dies tun, wird das Element tatsächlich ausgeblendet, wodurch die Klickaktion deaktiviert wird.

Auch, wenn Sie das Steuerelement mit einer Grafik-Taste verdecken, beachten Sie, dass in einigen Browsern (Firefox und IE, glaube ich), Sie nicht in der Lage sein werden, den Cursortyp in eine Hand zu ändern, wenn es sich um den Texteingabeteil des Dateisteuerelements handelt (es wird immer standardmäßig auf die Eingabe oder den regulären Nicht-Link-Zeiger verwendet). Und ja, ich habe versucht, cursor: pointer (and (und cursor: hand). ) zu verwenden.

Persönlich habe ich mit maßgeschneiderten Upload-Boxen gekämpft, und es gibt keine silberne Kugel, um ihr Aussehen oder ihre Anpassung perfekt zu machen. (insbesondere in Bezug auf das Verhalten des Cursors, da ich denke, dass ein UI-Deal-Breaker). Am Ende des Tages denke ich, dass es einfach einfacher ist zu akzeptieren, dass verschiedene Browser das Steuerelement anders machen, und so ist es eben.

Zusätzlich zum quirksmode Tutorial, hier ist eine weitere gute Ressource: