Das Design aller Eingabesteuerelemente lässts sich über die folgenden Variablen anpassen.
| Variable | Erklärung | Standard |
|---|---|---|
| input-nulltext-font-color | Die Schriftfarbe des Leertextes innerhalb eines Maskensteuerelements | #C1C1C1 |
| input-font-color | Die Schriftfarbe innerhalb eines Maskensteuerelements | var(--main-font-color) |
| input-font-color-highlight | Die Schriftfarbe innerhalb eines aktiven Maskensteuerelements | var(--input-font-color) |
| input-font-color-selection | Die Schriftfarbe selektierter Einträge in Maskensteuerelementen (z.B. Dropdowns und Listbox) | var(--contrast-font-color) |
| input-background-color | Die Hintergrundfarbe von Maskensteuerelementen | var(--main-background-color) |
| input-background-color-highlight | Die Hintergrundfarbe aktiver Maskensteuerelemente, sowie die Hoverfarbe in Auswahlsteuerelementen wie Dropdown oder Listbox | var(--secondary-color-lighter) |
| input-background-color-selection | Die Hintergrundfarbe selektierter Einträge in Maskensteuerelementen (z.B. Dropdowns und Listbox) | var(--secondary-color) |
| input-border-color | Die Rahmenfarbe von Eingabesteuerelementen | transparent |
| input-border-color-hover | Die Rahmenfarbe von Eingabesteuerelementen beim Hovern | var(--input-border-color) |
| input-border-color-highlight | Die Rahmenfarbe aktiver Eingabesteuerelemente | var(--input-border-color) |
| input-border-top-color | Die Rahmenfarbe (oben) von Eingabesteuerelementen | var(--input-border-color) |
| input-border-top-color-hover | Die Rahmenfarbe (oben) von Eingabesteuerelementen beim Hovern | var(--input-border-color-hover) |
| input-border-top-color-highlight | Die Rahmenfarbe (oben) aktiver Eingabesteuerelemente | var(--input-border-color-highlight) |
| input-border-left-color | Die Rahmenfarbe (links) von Eingabesteuerelementen | var(--input-border-color) |
| input-border-left-color-hover | Die Rahmenfarbe (links) von Eingabesteuerelementen beim Hovern | var(--input-border-color-hover) |
| input-border-left-color-highlight | Die Rahmenfarbe (links) aktiver Eingabesteuerelemente | var(--input-border-color-highlight) |
| input-border-right-color | Die Rahmenfarbe (rechts) von Eingabesteuerelementen | var(--input-border-color) |
| input-border-right-color-hover | Die Rahmenfarbe (rechts) von Eingabesteuerelementen beim Hovern | var(--input-border-color-hover) |
| input-border-right-color-highlight | Die Rahmenfarbe (rechts) aktiver Eingabesteuerelemente | var(--input-border-color-highlight) |
| input-border-bottom-color | Die Rahmenfarbe (unten) von Eingabesteuerelementen | var(--light-border-color) |
| input-border-bottom-color-hover | Die Rahmenfarbe (unten) von Eingabesteuerelementen beim Hovern | var(--default-border-color) |
| input-border-bottom-color-highlight | Die Rahmenfarbe (unten) aktiver Eingabesteuerelemente | var(--input-background-color-selection) |