CSS: input file Form-Element stylen

11. April 2013 Web-Entwicklung von Eric Kubenka

Für ein privates Projekt benötigte ich in einem Formular ein Feld für einen Dateiupload. Alle anderen Formelemente ließen sich problemlos stylen. Nur das "<input type="file">"-Element bereitete mir  Probleme. Das Hauptproblem dabei ist, dass es keine browserübergreifenden Default-Style gibt. In meinem Projekt wollte ich lediglich eine Schaltfläche haben, welche das Fenster zum Auswählen der Datei öffnet. Folgend werde ich erläutern wie sich das Input-Feld in wenigen Schritten stylen lässt.

Input-Feld Type: file in FirefoxInput-Feld Type: file in IE 10Input-Feld Type: file in Chrome

Ich verwende Twitter Bootsrap und habe ich am Beispiel von droplr.com orientiert. Grundvoraussetzung für das Vorhaben ist natürlich eine Form mit einem Datei-Upload-Feld.

<html>
	<head>
		<title>Style a input file element</title>
		<!-- web reference to tiwtter bootstrap -->
		<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
		<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
		<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet">
	</head>
	<body>
		<div class="container-fluid">
			<div class="row-fluid">
				<div class="span3 well">
					<form method="post">
						<div class="upload-button">
							<input type="file" name="upload" id="upload" class="input">
							Choose File
						</div>
					</form>
				</div>
			</div>
		</div>
	</body>
</html>

Dadurch ergibt sich folgendes simples Ergebnis im Google Chrome. Folgend ist nun für das Container-Element, welches das Input-Element umgibt die CSS-Eigenschaft “postion:relative” zu setzen. Für das Input-Element selbst ist die Position auf “absolute” zu setzen.

Default-Style nach Erstellung

.upload-button {
    position: relative;
    height: 30px;
    width: 200px;
    background: grey;
    border: 1px solid blue;
    margin: 0px !important;
}

.upload-button input
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
}

Durch diese Änderungen wird das Element zum Datei-Upload bereits eingegrenzt und ähnelt einer Schaltfläche. Jedoch wird das ursprüngliche Element auch noch angezeigt. Durch Setzen der Sichtbarkeit (opacity) wird es ausgeblendet.

Erste Style-Änderungen Nach Ausblenden des eigentlichen ElementsFertig gestylter Bootstrap-Button

.upload-button input
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
    opacity: 0;
}

Durch folgende Änderungen an der ursprünglichen Form und der mit gezeigten CSS-Datei lässt sich dann ein Twitter-Bootstrap-Button anzeigen und so unterscheidet sich das Dateiupload-Input-Feld nicht mehr von anderen Form-Elementen.

<html>
	<head>
		<title>Style a input file element</title>
		<!-- web reference to tiwtter bootstrap -->
		<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
		<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
		<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet">
		<style>
			.upload-button {
			    position: relative;
			    height: 30px;
			    margin: 0px !important;
			}

			.upload-button input
			{
			    position: absolute;
			    top: 0;
			    left: 0;
			    right: 0;
			    bottom: 0;
			    height: 30px;
			    opacity: 0;
			}
		</style>

	</head>
	<body>
		<div class="container-fluid">
			<div class="row-fluid">
				<div class="span3 well">
					<form method="post">
						<div class="btn btn-primary btn-block upload-button">
							<input type="file" name="upload" id="upload" class="input">
							Choose File
						</div>
					</form>
				</div>
			</div>
		</div>
	</body>
</html>

Damit ist das Stylen des Elements abgeschlossen. Der Quellcode liegt offen auf Github, eine Demo gibt es hier.

Zurück

Einen Kommentar schreiben

Kommentar von steflexx |

Geht noch viel kürzer:
.cl1 mit position relative;
.cl2 mit position absolut und opacity 0;
div außen mit class für normale button plus cl1;
innen der input mit cl2 und "Datei auswählen" nach dem input.
Geht Bombe und sind nur 3 Zeilen css!
Hast du eine Ahnung, wie ich den Cursor vom unsichtbaren Pfadfeld umbiege?! Geht leider weder über input[type="file"] noch eigene Klasse.

Kommentar von Eric |

Vielen Dank für deinen Kommentar. ja so geht es natürlich noch einen Tick komfortabler. Zu deiner Frage kann ich dir leider auch nicht weiterhelfen.

Grüße
Eric

Was ist die Summe aus 4 und 4?