Własny styl CSS dla elementu „file” w formularzu


30 grudnia 2015 / Michał Kortas


Formularz

Czy przycisk wybierania pliku musi wyglądać zupełnie inaczej w każdej z przeglądarek?

Takie pytanie otrzymałem we wczesnej fazie projektowania interfejsu aplikacji webowej. Oczywiście osoba, która je zadała, nie musiała wiedzieć, że wygląd ten narzuca z góry silnik przeglądarki. Postanowiłem jednak wyjść na przeciw temu zagadnieniu i przygotowałem krótki kod niwelujący różnice.

Zobacz DEMO

Formularz HTML z elementem „file”

Jeśli posiadasz już gotowy formularz, zawierający element input[type=”file”]  możesz śmiało przejść do następnego kroku. Poniższy listing stworzy przykładowy formularz, na którym będziesz mógł dalej pracować.

Kod HTML formularza

Formularz zawiera dwa główne elementy. Pierwszy z nich to pole tekstowe, a drugi – pole wyboru pliku.

Kod CSS formularza

Poniższe style zapewnią odpowiedni wygląd pracy.

To, co powstało, niestety bardzo różni się popularnych przeglądarkach.

Różnice w wyglądzie elementu "FILE" w przeglądarkach

Od lewej: Edge, Firefox, Chrome

W dalszej części sprawię, że pole „file” będzie wyglądać identycznie w każdym z przypadków.

Własny styl CSS pola „file” w formularzu

Istotą problemu jest ukrycie standardowego pola „file”, a ostylowanie kontenera-rodzica.

Daje to następujący efekt.

Własny styl pola "file" w formularzu

Własny styl CSS pola „file” w formularzu

Niestety, po wybraniu pliku z dysku, nie pojawi się jego nazwa. Dodam jednak odpowiedni kod JavaScript, który rozwiąże ten problem.

Kod JavaScript, pokazujący nazwę pliku

Zanim pokażę Ci kod, dodam najpierw dwa identyfikatory do elementów w formularzu.

  • id=”upload-label”  dla etykiety pola „file”
  • id=”upload-file”  dla pola „file”

Dzięki temu, poniższy listing spełni swoje zadanie.

Wykorzystując funkcję split()  zmusiłem przeglądarkę do wyświetlenia samej nazwy wybranego pliku zamiast całej ścieżki bezwzględnej.

Własne pole "file" po wybraniu pliku

Własne pole „file” po wybraniu pliku

Zobacz DEMO

Co jednak zrobić, jeśli przeglądarka nie będzie obsługiwała JavaScriptu? W moim przypadku JS był wymagany do ogólnego działania aplikacji, więc podstawą była odpowiednio skonfigurowana przeglądarka, jednak wykorzystując taki formularz na stronie internetowej, powinieneś koniecznie rozważyć to pytanie.


Tagi:


7 odpowiedzi na “Własny styl CSS dla elementu „file” w formularzu”

  1. Maniek pisze:

    Super, tego własnie szukałem:)

  2. Qwerty pisze:

    Fajnie, potrzebuje jeszcze informacji jak przerobić checkboxa tak/nie na coś o wyglądzie przełącznika. Może jakis tutorial? ;-)

  3. Albert221 pisze:

    Gdy wybierzemy jakiś plik, a następnie znowu będziemy chcieli go wybrać ale naciśniemy anuluj w okienku wybierania plików to przycisk pozostaje bez treści. Do tego cursor pointer jest w dziwnych miejscach nad przyciskiem, nie nad nim całym

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *