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

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.

<form>
	<div class="field">
		<label><em>Nazwa pliku</em></label>
		<input type="text" name="name" placeholder="Wpisz nazwę pliku...">
	</div>
	<div class="field upload">
		<label><em>Wybierz plik z komputera</em></label>
		<input type="file" name="upload-file">
	</div>
</form>

<form>

<label><em>Nazwa pliku</em></label>

</div>

<label><em>Wybierz plik z komputera</em></label>

</div>

</form>

Kod CSS formularza

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

body {
	background: #555;
	font: .9em sans-serif; 
}
body * {
	box-sizing: border-box;
}
form {
	width: 300px;
	margin: 0 auto;
	margin-top: 200px;
	padding: 20px;
	border: 10px solid #bbb;
	border-radius: 3px;
	box-shadow: 0 0 12px rgba(0,0,0,0.3);
	background: #eee;
}
form .field {
	margin-bottom: 10px;
}
form label {
	color: #999;
}
form input {
	width: 100%;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin-top: 5px;
}

body {

background: #555;

font: .9em sans-serif;

}

body * {

box-sizing: border-box;

}

form {

width: 300px;

margin: 0 auto;

margin-top: 200px;

padding: 20px;

border: 10px solid #bbb;

border-radius: 3px;

box-shadow: 0 0 12px rgba(0,0,0,0.3);

background: #eee;

}

form .field {

margin-bottom: 10px;

}

form label {

color: #999;

}

form input {

width: 100%;

padding: 8px;

border: 1px solid #ccc;

border-radius: 3px;

margin-top: 5px;

}

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.

form .upload {
	position: relative;
    overflow: hidden;
	width: 100%;
	padding: 8px;
	text-align: center;
	background: #dd4b4d;
	border-radius: 3px;
}
form .upload input[type="file"] {
	position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    width: 100%;
	height: 100%;
    cursor: pointer;
    opacity: 0;
}
form .upload label {
	color: #fff;
}
form .upload label:before {
	content: "\21EA";
	margin-right: 5px;
}

form .upload {

position: relative;

overflow: hidden;

width: 100%;

padding: 8px;

text-align: center;

background: #dd4b4d;

border-radius: 3px;

}

form .upload input[type="file"] {

position: absolute;

top: 0;

right: 0;

margin: 0;

padding: 0;

width: 100%;

height: 100%;

cursor: pointer;

opacity: 0;

}

form .upload label {

color: #fff;

}

form .upload label:before {

content: "\21EA";

margin-right: 5px;

}

Daje to następujący efekt.

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.

<script>
	document.getElementById("upload-file").onchange = function () {
		if(this.value.split(/(\\|\/)/g).pop()=='') {
			document.getElementById("upload-label").innerHTML = '<em>Wybierz plik z komputera</em>';
		}
		else {
			document.getElementById("upload-label").innerHTML = this.value.split(/(\\|\/)/g).pop();
		}
	};
</script>

document.getElementById("upload-file").onchange = function () {

if(this.value.split(/(\\|\/)/g).pop()=='') {

document.getElementById("upload-label").innerHTML = '<em>Wybierz plik z komputera</em>';

}

else {

document.getElementById("upload-label").innerHTML = this.value.split(/(\\|\/)/g).pop();

}

};

</script>

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

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: featured • file • formularz • input • plik • upload

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

Maniek pisze:
3 lutego 2016 o 10:48
Super, tego własnie szukałem:)
Odpowiedz
Qwerty pisze:
6 lutego 2016 o 23:48
Fajnie, potrzebuje jeszcze informacji jak przerobić checkboxa tak/nie na coś o wyglądzie przełącznika. Może jakis tutorial? ;-)
Odpowiedz
- Comandeer pisze:
  6 lutego 2016 o 23:59
  Co prawda nie nasz, ale też dobry ;) http://blog.piotrnalepa.pl/2015/04/01/css-jak-utworzyc-animowany-przycisk-typu-toggle-button-za-pomoca-css/
  Odpowiedz
  - Qwerty pisze:
    9 lutego 2016 o 08:50
    Dziękuję za szybką odpowiedź ;-)
- Freja Draco pisze:
  30 lipca 2018 o 01:11
  Proszę, nie rób tego. Czekboksy są zdecydowanie czytelniejsze.
  Odpowiedz
Albert221 pisze:
7 lutego 2016 o 15:46
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
Odpowiedz
- Michał Kortas pisze:
  7 lutego 2016 o 20:35
  Dzięki za uwagi, jutro poprawię kod :)
  Odpowiedz
Lomot pisze:
7 grudnia 2020 o 18:45
Chciałbym zrobić formularz w którym mamy wybrać plik, ma się on zassać a następnie wysłać na maila lecz w tym kodzie jedynie wychodzi nazwa. Jak mogę to naprawić?
Odpowiedz
- Michał Kortas pisze:
  7 grudnia 2020 o 22:10
  Po pierwsze dodaj do formularza atrybut enctype=”multipart/form-data”. Zakładam, że sprawdzasz zmienną $_POST. Zerknij do $_FILES.
  Odpowiedz

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

Formularz HTML z elementem „file”

Kod HTML formularza

Kod CSS formularza

Własny styl CSS pola „file” w formularzu

Kod JavaScript, pokazujący nazwę pliku

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

Skomentuj Comandeer Anuluj pisanie odpowiedzi

Partner technologiczny

Najnowsze komentarze

pjotruh

mizzo

odnowienie certyfikatu

domin

Ban