Drop-down mit unterschiedlichen Farben versehen in Ninja Forms

singled.at

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[attach='10511.vB'][/attach]

Werbepost

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.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Tutrix

das kannst du mit css formatieren

für z.B. "red" würde das so aussehen

Code

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

Code

.ninja-forms-drop-down option[value="red"] {
    background-color: red;
}

singled.at

wow wow wow mächtig mächtig. Es funktioniert prima! Die Farben sind jetzt hinterlegt.
Nur einen kleinen Schönheitsfehler habe ich noch:
wenn ich die Farbe aus dem Pull-down ausgewählt habe, erscheint sie NACH der Auswahl natürlich in dem Pull-down oben (so soll es auch sein). Nur die Hintergrundfarbe wandert nicht mit nach oben hoch. Hast Du hierfür noch einen CSS-Tipp?

Übrigens tolle Webseite artofpic.de!!!!

Tutrix

mal kurz was getestet

Code

<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

Code

.white {
    background-color: #FFFFFF;
}
    .red {
    background-color: #FF0000;
}
   .blue {
    background-color: #3399FF;
}
   .green {
    background-color: #66FF00;
}

Alles anzeigen

also die "Klassen" und "onchange" hinzufügen

sieht dann so aus
[attach='10512.vB'][/attach]

wenn du dies in eine html-Datei fügst, siehst du die Funktion

HTML

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

Alles anzeigen

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

singled.at

mhhh stellt sich mir nur die Frage wo ich das in dem Plugin ninja-forms einfügen kann ???

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Drop-down mit unterschiedlichen Farben versehen in Ninja Forms

Jetzt mitmachen!