Zero Trickery Custom Radios and Checkboxes

Ich habe das Gefühl, die Hälfte aller „individuell gestalteten Radio-Buttons und Checkboxen“ macht zwei Dinge

1. Mache sie größer
2. Koloriere sie

Ich denke immer an SurveyMonkey, wenn ich an große, klobige Radios und Checkboxen denke. Und tatsächlich, wenn man sich die Benutzeroberfläche kurz ansieht, auch intern, verwendet die App diese überall.

Ich denke, es ist erwähnenswert, dass, wenn das alles ist, was Sie tun, Sie das vielleicht mit null CSS-Tricksereien erreichen könnten. Machen Sie sie einfach… größer und färben Sie sie ein.

Wie…

input[type="radio"],
input[type="checkbox"] {
  width: 3em;
  height: 3rem;
  accent-color: green;
}

Das macht diese Dinger größer *und* färbt sie ziemlich gut ein!

Außer (obligatorisches trauriges Posaunen-Geräusch) in Safari

Wir sind *so nah* dran, mit sehr einfachem CSS den Hauptanwendungsfall für benutzerdefinierte Checkboxen und Radios zu erfüllen. Aber kein Erfolg, es sei denn, Sie können sich damit abfinden, das Safari-UI einfach zu ignorieren (es ist schließlich *immer noch voll funktionsfähig*).

Wenn Sie aufgeben und sich für ein komplett eigenes Design entscheiden müssen, hat Stephanie Eckles das für Sie!

• Pure CSS Custom Styled Radio Buttons
• Pure CSS Custom Checkbox Style

In verwandten Nachrichten denke ich immer an ein „Toggle“-UI-Steuerelement als einen Satz von 2 per Progressive Enhancement verbesserten Radio-Buttons, aber es stellt sich heraus, dass <button> der richtige Weg ist, wie Michelle Barker hier beschreibt. Keine native UI für Slider-Toggle-Dingens, leider.