Um schreiben oder kommentieren zu können, benötigen Sie ein Benutzerkonto.
Sie haben schon ein Benutzerkonto? Melden Sie sich hier an.
Jetzt anmeldenHier können Sie ein neues Benutzerkonto erstellen.
Neues Benutzerkonto erstellen
Hallo,
ich möchte mit ninja-forms eine drop-down Auswahl mit Farben erstellen. Dabei soll die jeweilige geschriebene Farbe mit der entsprechenden Farbe im Hintergrund in dem drop-down unterlegt sein.
Hat jemand eine Idee wie man dies umsetzen kann?
Vielen Dank
Joachim
Hallo!
Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.
das kannst du mit css formatieren
für z.B. "red" würde das so aussehen
option[value="red"] {
background-color: red;
}statt red kannst auch den Farbcode verwenden also #ff0000
wenn für das Dropdown noch eine Klasse vorhanden(siehst du im Quelltext) ist, diese davor hängen
(value auch dem Quelltext entnehmen)
also nur als Beispiel
.ninja-forms-drop-down option[value="red"] {
background-color: red;
}mal kurz was getestet
<select onchange="this.className=this.options[this.selectedIndex].className" class="white">
<option class="white" value="">Farbe wählen</option>
<option class="red" value="red">red</option>
<option class="blue" value="blue">blue</option>
<option class="green" value="green">green</option>
</select>css wäre dann
.white {
background-color: #FFFFFF;
}
.red {
background-color: #FF0000;
}
.blue {
background-color: #3399FF;
}
.green {
background-color: #66FF00;
}also die "Klassen" und "onchange" hinzufügen
sieht dann so aus
wenn du dies in eine html-Datei fügst, siehst du die Funktion
<html><head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>select-test</title>
<style type="text/css">
.white {
background-color: #FFFFFF;
}
.red {
background-color: #FF0000;
}
.blue {
background-color: #3399FF;
}
.green {
background-color: #66FF00;
}
</style>
</head>
<body>
<select onchange="this.className=this.options[this.selectedIndex].className" class="white">
<option class="white" value="">Farbe wählen</option>
<option class="red" value="red">red</option>
<option class="blue" value="blue">blue</option>
<option class="green" value="green">green</option>
</select>
</body>
</html>ob das sauber in allen Browsern funktioniert musst testen
aber da gibt es sicher ein jQuery Script für, das dies besser umsetzt
kommt ja auch darauf an, in wieweit sich die Ausgabe des Plugins anpassen lässt
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!