HTML5 & CSS3Promowany

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

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.

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

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

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

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.

<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
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:featuredfileformularzinputplikupload

komentarzy 6

Zostaw odpowiedź