Eigene Auswahllisten ueberall: dunkel und ueber der Seite statt im Fluss

Chrome zeichnet die Liste eines <select> hell auf grau und laesst sich davon
nicht abbringen. js/solar/auswahl.js ergaenzt jedes <select> um einen eigenen
Knopf; die Liste haengt an <body> und liegt ueber der Seite, damit ein Modal
nicht hoeher wird und der Inhalt nicht springt. Ab neun Eintraegen mit
Suchfeld. Der eigene Picker im Raumfenster faellt dafuer weg.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-16 07:55:17 +02:00
co-authored by Claude Opus 5
parent fe8630eb4f
commit d36989ae0d
6 changed files with 391 additions and 69 deletions
+11 -9
View File
@@ -508,8 +508,7 @@ function zeichneLicht($d)
// Presets, Effekte und andere Listen. Wenige Eintraege stehen als Chips
// da; lange Listen (WLED hat ueber 180 Effekte) bekommen einen Knopf mit
// dem aktuellen Eintrag, der eine durchsuchbare Liste aufklappt. Die
// native Auswahlliste zeichnet der Browser hell auf hell und passt nicht
// in das dunkle Fenster. Welcher Eintrag gerade gilt, liest
// Welcher Eintrag gerade gilt, liest
// js/solar/raumfenster.js bei WLED live aus (room.php?action=wled);
// data-feld ist der Parametername, "effect" oder "preset".
foreach ($listen as $c) {
@@ -525,13 +524,16 @@ function zeichneLicht($d)
if (count($p["options"]) <= 16) {
$html .= $kopf . "<div class='rf-chips'>" . $knoepfe . "</div></div>";
} else {
$html .= $kopf
. "<button type='button' class='rf-picker-knopf' aria-expanded='false'>"
. "<span data-rf-picker-wert></span><i class='bi bi-chevron-down'></i></button>"
. "<div class='rf-picker' hidden>"
. "<input type='search' class='rf-suche' placeholder='" . htmlspecialchars($c["name"], ENT_QUOTES) . " suchen …'"
. " aria-label='" . htmlspecialchars($c["name"], ENT_QUOTES) . " suchen'>"
. "<div class='rf-picker-liste'>" . $knoepfe . "</div></div></div>";
// Ueber 180 WLED-Effekte waeren als Chips eine Wand. Aus dem
// <select> macht js/solar/auswahl.js die eigene Liste mit Suchfeld,
// und die liegt ueber dem Fenster, statt es hoeher zu machen.
$html .= $kopf . "<select class='form-select form-select-sm'"
. " aria-label='" . htmlspecialchars($c["name"], ENT_QUOTES) . "'>";
foreach ($p["options"] as $o) {
$html .= "<option value='" . htmlspecialchars($o["value"], ENT_QUOTES) . "'>"
. htmlspecialchars($o["label"]) . "</option>";
}
$html .= "</select></div>";
}
}
return $html . "</div></div>";