Automatically Create Custom CSS3 Select BoxesCustom CSS3 Select Boxes automatisch erstellen

With the help of CSS3 Transitions it is possible to create beautiful custom CSS3 select boxes automatically. The script you can download here will automatically convert all select boxes which are inside a div with the class lingulo-select into custom select boxes.

In order to convert your select boxes into Lingulo Custom Select Boxes you need to include the minified script as well as the style.css file. Then simply wrap every select box you would like to be converted with a div with the classes lg-select and either style1, style2 or style3. Have a look at the preview to decide which style you would like to use. If you don´t use a particular styling at all it is best to remove it from the CSS file in order to decrease file size. It is also necessary to add a span element with the class lg-placeholder and a text for the placeholder just above your select element.
The Lingulo Custom Select Box script will look for select elements in your HTML code with the following structure.

HTML Code

<div class="lg-select style1">
<span class="lg-placeholder">Choose Your Dog</span>
<select><option value="black-labrador">Black Labrador</option>
<option value="old-english-sheepdog">Old English Sheepdog</option>
<option value="pomeranian">Pomeranian</option>
<option value="black-pug">Black Pug</option>
<option value="white-poodle">White Poodle</option>
<option value="saint-bernard">Saint Bernard</option>
<option value="rhodesian-ridgeback">Rhodesian Ridgeback</option></select></div>Mithilfe von CSS3 Transitions lassen sich schöne ungewöhnliche CSS3 Select-Boxen erstellen. Das Script, das Du hier herunterladen kannst, konvertiert automatisch alle Auswahlfelder (Select-Boxen), die innerhalb einer div mit der Klasse lingulo-select zu den Lingulo-Auswahlfeldern.

Das Lingulo Select-Boxen Script durchsucht Deinen HTML-Code, um select-Elemente in der folgenden Form zu finden. Um Deine Auswahlfelder zu konvertieren, musst Du sowohl das minimierte Script als auch die style.css-Datei in Deine Seite einbinden. Danach umschließt Du einfach jedes Auswahlfeld, das Du konvertiert haben möchtest, mit einer div mit der Klasse lg-select sowie entweder style1, style2 oder style3. Schau Dir am besten die Vorschau an, um zu entscheiden, welchen Style Du für Deine Auswahlfelder haben möchtest. Wenn Du einen bestimmten Style auf Deiner Seite gar nicht verwenden möchtest, bietet es sich an, den entsprechenden Code aus der CSS-Datei zu entfernen. Es ist ebenfalls erforderlich, direkt oberhalb des Auswahlfeldes ein span-Element mit der Klasse lg-placeholder und einem Text für den Platzhalter einzufügen.

HTML Code

<div class="lg-select style1">
<span class="lg-placeholder">Choose Your Dog</span>
<select><option value="black-labrador">Black Labrador</option>
<option value="old-english-sheepdog">Old English Sheepdog</option>
<option value="pomeranian">Pomeranian</option>
<option value="black-pug">Black Pug</option>
<option value="white-poodle">White Poodle</option>
<option value="saint-bernard">Saint Bernard</option>
<option value="rhodesian-ridgeback">Rhodesian Ridgeback</option></select></div>