Intern ❘ Inhaltsverzeichnis ❘ Glossar ❘ Bausteine ❘ Linkliste ❘ Tutorials ❘ Kommentare

Thema: CSS - Checkboxen und Radiobuttons farblich anpassen ➧ Artikel anzeigen

11 Kommentare ▼  ◀ ▶
Maik Haas schrieb am Sonntag, den 22 August 2021 #1
@Werner

kleiner Hinweis:

1. Du hast hier die Angaben für die HTML-Datei vergessen.
Die habe ich für mich selbst, aus dem Seitenquelltext dieser Vorlage entnommen.

2. Die Slider funktionieren auch im aktuellen Firefox. 👍
Werner schrieb am Sonntag, den 22 August 2021 #2
Klar, aus dem Seitenquelltext heraus kopieren ist immer eine gute Idee 😀👍

Im aktuellen Firefox (Version: 91) sind alle Optionen Blau!

checkbox_firefox.png
Orginalgröße: 1330 x 805 Pixel
Maik Haas schrieb am Montag, den 23 August 2021 #3
@Werner,

ich wäre nicht darauf gekommen,das es wegen der Funktionalität,um die Farben ging.

Vielleicht solltest du den Satz mit den Browser-Hinweis umändern,bis es vielleicht mit Firefox irgendwann auch klappt.

Die CSS-Angabe "accent-color" funktioniert zurzeit nur auf den Chromium basierten Browsern.
Werner schrieb am Montag, den 23 August 2021 #4
Danke Maik,
ich werde das ändern 👍

Im Firefox über about:config (layout.css.accent-color.enabled) lässt sich die Darstellung bereits anpassen.
Ich nehme an das es für die nächste Version aktiviert wird:

firefox_slider2.png
Orginalgröße: 611 x 504 Pixel
Maik Haas schrieb am Mittwoch, den 25 August 2021 #5
In diesem Artikel wird ein Beispiel beschrieben,wie die Angabe "accent-color" noch genutzt werden kann.

Im Artikel steht unter Browser Support auch,das "Chromium 93+ und Firefox 92+" die Angabe "accent-color" unterstützen sollen.

web.dev/accent-color/
Werner schrieb am Mittwoch, den 25 August 2021 #6
Danke das du dir die Mühe gemacht hast danach zu suchen 👍
Interessant, das soll auch beim HTML Progress-Tag und CSS :focus-visible gehen 😀

Hier steht das auch developer.mozilla.org/en-U[…]patibility im Abschnitt: Browser compatibility
Maik Haas schrieb am Donnerstag, den 26 August 2021 #7
Hier ist ein Beispiel, im Zusammenspiel mit dem Progress-Tag. 👍

<html>
<body>

<h1>The progress element</h1>

<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>

</body>
</html>

Funktioniert bei mir im aktuellen Firefox 91. 👍
Werner schrieb am Donnerstag, den 26 August 2021 #8
Genial, ich werde die Seite sofort ändern 😀
Maik Haas schrieb am Donnerstag, den 26 August 2021 #9
Freut mich,das ich helfen konnte. 👍

Hier habe ich ein Artikel zum Thema "focus-visible",vielleicht kannst du damit etwas anfangen.

css-tricks.com/almanac/sele[…]s-visible/

Hier noch eine Demo dazu auf Codepen.

codepen.io/tutsplus/pen/WNp[…]itors=1100
Maik Haas schrieb am Donnerstag, den 26 August 2021 #10
Habe die Demo von Codepen getestet und es funktioniert im Firefox 91.

Habe in der Demo folgende Änderung festgestellt.

Wenn man in der CSS-Zeile ":focus:not(:focus-visible) {"

die Angabe "outline: none" mit einem Schrägstrich auskommentiert,und anschließend auf den Login-Button klickt,dann ist der Button "rot umrandet".

Entfernt man den Schrägstrich wieder,und klickt erneut auf den Button,dann ist die "rote Umrandung" nicht mehr zu sehen.
11 Kommentare ▲  ◀ ▶