CSS: input file Form-Element stylen

11.04.2013 20:59 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.

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.

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

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