Hallo Arnd,
Thema kannst du gut googeln: css selektor spezifität
Englisch und prominent:
developer.mozilla.org/de/docs/Web/CSS/Gu.../Cascade/Specificity
Deutsch und kompakt:
hellocoding.de/blog/coding-language/css/...itaet-von-selektoren
Die folgende beispielhafte Lösung funktioniert auf deiner Seite für alle Input-Elemente von Visforms.
Wichtig ist die explizit Verwendung von ID-Bestandteilen des Selektors, die am stärksten binden bzw. in der Berechnung der Reihenfolge zählen.
In diesem Beispiel sind sogar 2 IDs jeweils Bestandteile der Selektoren.
Der eine Teil kommt von Uikit und gegen den musst du dich ja durchsetzen, also stärker sein.
Das \# bedeutet einen maskierten Hash, der dann nicht länger als CSS Schlüsselwort gelesen wird sondern als literaler Hash.
Diese Schreibweise ist sehr ungewöhnlich und speziell.
Weitere Unterscheidungen etwa bezüglich der Input-Typen kommen einfach hinzu.
Code:
#page\#0 input[id^=field]:checked {
background-color: #ffffff;
border-color: #000000;
}
#page\#0 input[id^=field]:checked {
background-image: url(https://ampel.campring.de/j5/images/haken.svg);
}
Liebe Grüße, Ingmar