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.   https://youtu.be/PlldXyuTnUw?embedable=true  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   auf unserem Label zusammen mit etwas einfachem CSS, um das gewünschte Erscheinungsbild zu erstellen. ::before  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   hinzu: ::before   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   und dem angrenzenden Geschwisterselektor auf unserem Etikett verarbeiten: :checked   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   und den angrenzenden Geschwisterselektor mit der Bezeichnung verwenden: :focus   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!   https://codepen.io/brianmtreese/pen/bGOGeBJ?embedable=true

Buy Me a Coffee

Dieses Audio ist in der Originalsprache der Geschichte produziert!

Zu lang; Lesen

Make resilience your competitive advantage

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

About Author

KOMMENTARE

Hängeetiketten

DIESER ARTIKEL WURDE VORGESTELLT IN

Related Stories

Welcome to HackerNoon Decoded: The Best of 2024 Tech Blogging

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

HackerNoon Decoded 2024: Celebrating Our Tech Stories Community!

HackerNoon Decoded 2024: Celebrating Our Cybersecurity Community!

Welcome to HackerNoon Decoded: The Best of 2024 Tech Blogging

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

HackerNoon Decoded 2024: Celebrating Our Tech Stories Community!

HackerNoon Decoded 2024: Celebrating Our Cybersecurity Community!

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps