Ustawianie jednolitego <typ wejściowy = "plik"> szerokość we wszystkich przeglądarkach

Question

Jaka kombinacja CSS lub atrybutów jest potrzebna?

Answer 1

• ukryć rzeczywistą kontrolę
• wykonany div z kontroli i stylizacji chcesz na nim

Przycisk nie jest standardowym kontrola HTML.

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

Answer 2

co z

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

? będzie wyglądać tak samo z wyjątkiem safari na mac Chyba (na mac, wszystkie kontrole wysyłania wygląda inaczej, na wszystkich przeglądarkach)

Answer 3

Oprócz tutorialu Quirks Mode, oto kolejny dobry zasób: http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

Jeśli jesteś ukrywając rzeczywistą kontrolę, pamiętaj, że bardzo ważne jest, aby ustawić krycie kontrolki na zero i nie używać w rzeczywistości visibility: hidden. Wykonanie tego spowoduje ukrycie elementu, wyłączając akcję kliknięcia.

Ponadto, jeśli ukrywasz kontrolkę za pomocą przycisku graficznego, pamiętaj, że w niektórych przeglądarkach (Firefox i IE, jak sądzę), nie będziesz w stanie zmienić typu kursora na rękę, gdy jest nad częścią wejściową pliku sterowania tekstem (zawsze będzie to domyślne wejście lub zwykły wskaźnik inny niż link). I tak, próbowałem używać cursor: pointer (i cursor: hand).

Osobiście zmagałem się z niestandardowymi skrzynkami wysyłkowymi, a nie ma srebrnej kuli, aby uzyskać doskonały wygląd lub dostosowywanie. (szczególnie w odniesieniu do zachowania kursora, ponieważ uważam, że łamacz transakcji typu UI). Podsumowując, wydaje mi się, że łatwiej zaakceptować, że różne przeglądarki wyrenderują kontrolę w inny sposób, i tak właśnie jest.