.native-control Opt-out: global select-Style ueberschrieb das System-Native

User-Screenshot: dropdowns sehen immer noch wie pills aus. Grund: das
globale `select { appearance: none; background-image: var(--select-arrow);
border-radius: 999px; ... }` in index.css uebermalte die Inline-Resets von
BarSelect — globale CSS-Specificity gewann.

Fix:
- Neue `.native-control`-Klasse in index.css setzt mit `revert` alle
  pill-Overrides zurueck → WebKit/macOS rendert wieder Default-Combobox
- BarSelect: className="native-control" am <select>
- Custom-Massstab-Input: className="native-control"

Andere Selects im Projekt behalten den pill-Look (Ebenen-/Geschoss-Manager
etc.) — nur die Oberleiste opt-out.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-05-20 22:14:53 +02:00
parent 536d42f097
commit 8ad9e23838
2 changed files with 30 additions and 1 deletions
+27
View File
@@ -196,6 +196,33 @@ select:hover {
border-color: var(--text-muted);
}
/* Opt-out: System-native Chrome (Oberleiste). Setzt die globalen
pill/appearance:none Overrides zurueck und ueberlaesst WebKit das
Rendering — Standard-macOS-Combobox + Native-Popup-Menue. */
select.native-control,
input.native-control {
appearance: auto;
-webkit-appearance: auto;
background: revert;
background-image: none;
border: revert;
border-radius: revert;
padding: revert;
font: revert;
letter-spacing: revert;
box-shadow: none;
}
select.native-control:hover,
input.native-control:hover {
background: revert;
border-color: revert;
}
select.native-control:focus,
input.native-control:focus {
box-shadow: revert;
border-color: revert;
}
/* Utility */
.label-xs {
font-size: 10px;