.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:
@@ -102,6 +102,7 @@ function BarSelect({ icon, value, onChange, title, disabled, width, children })
|
|||||||
style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
|
style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
|
||||||
)}
|
)}
|
||||||
<select
|
<select
|
||||||
|
className="native-control"
|
||||||
value={value || ''}
|
value={value || ''}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
onChange={(e) => onChange(e.target.value)}
|
onChange={(e) => onChange(e.target.value)}
|
||||||
@@ -400,6 +401,7 @@ export default function OberleisteApp() {
|
|||||||
{customMode ? (
|
{customMode ? (
|
||||||
<input
|
<input
|
||||||
ref={customInputRef}
|
ref={customInputRef}
|
||||||
|
className="native-control"
|
||||||
disabled={isPerspective}
|
disabled={isPerspective}
|
||||||
type="text" placeholder="1:N"
|
type="text" placeholder="1:N"
|
||||||
value={draft}
|
value={draft}
|
||||||
@@ -423,7 +425,7 @@ export default function OberleisteApp() {
|
|||||||
value={dropdownValue}
|
value={dropdownValue}
|
||||||
onChange={(v) => applyDropdown(v)}
|
onChange={(v) => applyDropdown(v)}
|
||||||
disabled={isPerspective}
|
disabled={isPerspective}
|
||||||
width={120}
|
width={140}
|
||||||
title="Gesetzter Massstab"
|
title="Gesetzter Massstab"
|
||||||
>
|
>
|
||||||
<option value="__none__">—</option>
|
<option value="__none__">—</option>
|
||||||
|
|||||||
@@ -196,6 +196,33 @@ select:hover {
|
|||||||
border-color: var(--text-muted);
|
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 */
|
/* Utility */
|
||||||
.label-xs {
|
.label-xs {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
|
|||||||
Reference in New Issue
Block a user