So gestalten Sie HTML-Radiobuttons: Eine Schritt-für-Schritt-Anleitung

HTML-Optionsfelder sind ein fester Bestandteil von Webformularen, ihr Standardaussehen lässt jedoch zu wünschen übrig. In diesem Blogbeitrag gehen wir eine meiner Lieblingsmethoden durch, um das Aussehen von Optionsfeldern mithilfe von CSS anzupassen und so ein benutzerfreundlicheres und optisch ansprechenderes Erlebnis zu schaffen.

Beginnen wir mit dem Ausblenden der Optionsfelder!

Wir müssen zunächst die Einschränkungen der browserübergreifenden Gestaltung von Optionsfeldern anerkennen. Es ist zwar frustrierend, dass wir sie nicht direkt formatieren können, aber wir können Problemumgehungen verwenden. In diesem Beispiel besteht der erste Schritt darin, die eigentliche Optionsfeldeingabe auszublenden. Ich weiß, das klingt seltsam, aber wir wissen, dass wir sie nicht stylen können, also müssen wir sie einfach aus der Gleichung herausnehmen.

Dies sollte jedoch auf zugängliche Weise erfolgen, um sicherzustellen, dass es für alle Benutzer funktionsfähig bleibt. Dies kann durch die Verwendung der folgenden Stile erreicht werden, die den Inhalt visuell verbergen und gleichzeitig seine Benutzerfreundlichkeit bewahren:

 input[type="radio"] { border: 0 !important; clip: rect(1px, 1px, 1px, 1px); height: 1px !important; overflow: hidden; padding: 0 !important; position: absolute !important; width: 1px !important; }

Erstellen der benutzerdefinierten Optionsfelder

Um das benutzerdefinierte Erscheinungsbild des Optionsfelds zu erstellen, nutzen wir das Pseudoelement ::before auf unserem Label zusammen mit etwas einfachem CSS, um das gewünschte Erscheinungsbild zu erstellen.

Für unser Beispiel sieht der HTML-Code so aus:

 <form> <h1>Can We Style HTML Radio Buttons?</h1> <ul> <li> <input type="radio" value="yes" name="option" id="yes" /> <label for="yes">Yes</label> </li> <li> <input type="radio" value="no" name="option" id="no" /> <label for="no">No</label> </li> <li> <input type="radio" value="maybe" name="option" id="maybe" /> <label for="maybe">Maybe</label> </li> </ul> </form>

Zunächst fügen wir unserem Label-Element die folgenden Stile hinzu:

 label { display: inline-flex; align-items: center; }

Dadurch wird sichergestellt, dass unsere Optionsfeldstile nach dem Hinzufügen korrekt vertikal am Beschriftungstext ausgerichtet sind.

Jetzt fügen wir unsere simulierten Optionsfelder mithilfe des Pseudoelements ::before hinzu:

 label::before { content: ''; display: block; height: 1.25em; width: 1.25em; border: solid 1px #ccc; border-radius: 50%; margin-right: 0.5em; }

An diesem Punkt haben wir etwas, das anfängt, einer Optionsfeldliste zu ähneln, aber wenn wir auf die Radios klicken, werden wir sehen, dass nichts passiert. Obwohl das Pseudoelement optisch einem Optionsfeld ähnelt, mangelt es ihm an Interaktivität, da wir den aktivierten Zustand noch nicht behandelt haben.

Umgang mit Interaktion und Zuständen

Wir können den geprüften Zustand mit der Pseudoklasse :checked und dem angrenzenden Geschwisterselektor auf unserem Etikett verarbeiten:

 input[type="radio"]:checked + label { color: black; }

Für den inneren Punkt können wir einen radialen Farbverlauf auf unserem Pseudoelement nutzen:

 input[type="radio"]:checked + label::before { background: radial-gradient(0.75em circle at center, currentColor 50%, transparent 55%); box-shadow: 0 0 1em 0 rgba(10, 150, 255, 0.75); border-color: currentColor; }

Wenn wir nun darauf klicken, funktionieren sie ähnlich wie native Optionsfelder. Und wir können die Interaktionen verbessern, indem wir einige Übergangseffekte hinzufügen:

 label::before { ... transition: border ease-in 150ms, box-shadow ease-in 150ms; }

Vergessen wir nicht den Fokus

Um die Barrierefreiheit zu verbessern, müssen wir uns auch mit dem Fokussierungsstatus der simulierten Optionsfelder befassen. Dieses Mal müssen wir die Pseudoklasse :focus und den angrenzenden Geschwisterselektor mit der Bezeichnung verwenden:

 input[type="radio"]:checked + label, input[type="radio"]:focus + label { color: black; } input[type="radio"]:focus + label::before { box-shadow: 0 0 1em 0 rgba(10, 150, 255, 0.75); border-color: currentColor; }

Abschluss

Mit dieser Methode können wir stilvolle und zugängliche benutzerdefinierte Optionsfelder erstellen, die das Benutzererlebnis erheblich verbessern. Diese benutzerdefinierten Optionsfelder sehen nicht nur besser aus als die Standard-Optionsfelder, sondern können bei richtiger Implementierung auch ein besseres Feedback und eine bessere Interaktion bieten.

Dies war ein ziemlich einfaches Beispiel, das sich vielleicht nicht einmal wesentlich von den nativen Browserstilen unterscheidet, aber der Schlüssel ist, dass wir mit diesem Setup so ziemlich alles tun können, was wir wollen. Experimentieren Sie also ruhig mit den Stilen und passen Sie sie an das Design Ihres Projekts an.

Möchten Sie es in Aktion sehen?

Schauen Sie sich den Democode und Beispiele dieser Technik im Codestift-Beispiel unten an. Wenn Sie Fragen oder Gedanken haben, zögern Sie nicht, einen Kommentar zu hinterlassen.

Denken Sie daran, dass Sie mit ein wenig Kreativität und etwas CSS das Erscheinungsbild von HTML-Optionsfeldern an Ihr Design anpassen und gleichzeitig Zugänglichkeit und Benutzerfreundlichkeit beibehalten können!