XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Auswahlfeld farbig (http://xhtmlforum.de/showthread.php?t=74210)

wandler 29.03.2021 17:25

Auswahlfeld farbig
 
Hallo,

ich will in einem Formular das Auswahlfeld optisch mit Farben darstellen. Diese Farben ergänzen quasi den Inhalt des jeweiligen Elements.
Die Farben werden soweit auch angezeigt, allerdings beim Auswählen mit der Maus (:hover) wird die Hintergrundfarbe dann Blau angezeigt und mir ist nicht bekannt, wie ich das verhindern bzw. ändern kann.
Kennt jemand dazu eine Lösung?

Code:

select > option[value="0"] {
  background: white;
  color: black;
}
select > option[value="1"] {
  background: green;
  color: white;
}
select > option[value="2"] {
  background: orange;
  color: black;
}
select > option[value="3"] {
  background: red;
  color: black;
}
select > option[value="4"] {
  background: black;
  color: white;
}

HTML-Code:

<select id="...">
  <option value="0">Inaktiv</option>
  <option value="1">Stufe 1</option>
  <option value="2">Stufe 2</option>
  <option value="3" selected="">Stufe 3</option>
  <option value="4">Stufe 4</option>
</select>

Danke!

cloned 29.03.2021 17:35

Die werden vom OS gerendert, auf die Elemente hast du an der Stelle keinen Einfluss. Du kannst mit HTML, CSS und JS dein eigenes Select nachbauen, dann kannst du natürlich alles so stylen wie du willst.
Also so etwas: https://select2.org (ist ein plugin für jquery, gibt auch genug die ohne dem auskommen. und auch welche die mehr oder weniger accessible sind, das ist select2 nämlich nicht wirklich)

basti1012 30.03.2021 09:55

Man könnte es auch so machen
https://codepen.io/basti1012/pen/mdRrgjm


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:56 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023