HTML Radiobutton mit eigenem Designen erstellen (HTML & CSS)

Heute machen wir mal wieder etwas fürs Webdesign und zwar zeige ich euch wie ihr Radiobutons designen könnt.

Ihr kennt das, da hat man ein Formular und möchte ein paar Infos beim Webseitenbesucher abfragen und dann verwendet man diese Radiobuttons (Diese runden Dinger) die meistens auch in einer Liste aufeinander gestapelt sind. Total langweilig 🙂

Heute zeige ich euch aber wie man die nebeneinander positionieren kann und auch ein wenig mit Farbe.

Video

HTML

<div class="formular">
        <input type="radio" name="bezahlung" id="kreditkarte" value="kreditkarte">
        <label for="kreditkarte">Kreditkarte</label>

        <input type="radio" name="bezahlung" id="paypal" value="paypal">
        <label for="paypal" checked>Paypal</label>

        <input type="radio" name="bezahlung" id="rechnung" value="rechnung">
        <label for="rechnung">Rechnung</label>
    </div>

CSS

.formular input[type="radio"] {
    display: none;
}

.formular label {
    position: relative;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    border: 3px solid #fff;
    padding: 10px 15px;
    border-radius: 5px;
    align-items: center;
    gap: 10px;

}

.formular label::before {
    content: "";

    height: 20px;
    width: 20px;
    border: 3px solid #fff;
    border-radius: 50%;

}

.formular input[type="radio"]:checked+label:before {
    background-color: #55D6BE;

}

.formular input[type="radio"]:checked+label {
    background-color: #7D5BA6;
}