Einheitliches Design für Formularobjekte

Die Darstellung der Formularobjekte ist stark von dem Browser und der Plattform abhängig. Dementsprechend fällt deren Aussehen oft sehr unterschiedlich aus und passt nicht immer zu dem Design der Website. Wird eine einheitliche Darstellung in allen Browsern und Plattformen gewünscht, dann kann deren Darstellung mit CSS angepasst werden.

darstellung-auswahlfeld-in-verschiedenen-browsern

Darstellung einer Auswahlliste in Firefox für Ubuntu, Firefox für MacOS und Safari.

Damit der Browser die eigene Gestaltung der Formularobjekte anzeigt, muß zunächst die Default-Darstellung deaktiviert werden. Dies geschieht mit der CSS-Eigenschaft »appearance«. Nur dann, wenn appearance auf »none« gesetzt wurde, werden auch alle CSS-Eigenschaften für die eigene Gestaltung angezeigt

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #d13328;
        color: #000;
        font-size: 18px;
        padding: 3px 30px 5px 10px;
        border-radius: 0;
        background-color: #fff;
        background-image: url('/images/triangle.svg');
        background-repeat: no-repeat;
        background-size: 20px 20px;
        background-position: 95% center;
        height: 35px;
        min-width: 200px;  
        outline: none;
}

Ein andere Option ist das jQuery Plugin »Uniform«. Dieses Plugin wurde mit dem Ziel einer einheitlichen Darstellung über alle Plattformen geschaffen. Es unterstützt verschiedene Themes, die mit Hilfe eines kleinen Konfigurators sogar angepasst werden können.


 

Die Verwendung ist sehr einfach. Dafür wird lediglich jQuery benötigt und das Plugin mit einen der Themes in Form eines CSS-Files.

<script src="jquery.uniform.js" type="text/javascript"></script>
<link rel="stylesheet" href="uniform.default.css" type="text/css" />

Uniform kann entweder nur auf bestimmte oder alle Formularobjekte angewendet werden. Dafür gibt noch eine ganze Reihe von optionalen Parametern, mit denen das Verhalten von Uniform angepasst werden kann.

jQuery("select, input:checkbox, input:radio, input:file").uniform();

Eine Besonderheit bei der Verwendung von Uniform sind dynamische Werte, z. B. in Select-Listen. Sollten deren Werte mit Javascript geändert werden, dann muss das entsprechende Formularobjekt aktualisiert werden, andernfalls werden die geänderten Werte nicht angezeigt.

jQuery.uniform.update([elem/selector string]);