Mit HTML und CSS können Sie benutzerdefinierte Radio-Buttons erstellen, indem Sie die Standard-Buttons mit benutzerdefinierten Stilen ersetzen. Hier ist ein einfaches Beispiel für benutzerdefinierte Radio-Buttons:
HTML:
```
```
CSS:
```css
.custom-option {
position: relative;
padding-left: 35px;
cursor: pointer;
font-size: 20px;
}
/* Verstecken Sie das Standard-Radio-Button */
.custom-option input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Erstellen Sie einen benutzerdefinierten Radio-Button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
/* Wenn das zuvor definierte input ausgecheckt wird, fügt einen blauen Hintergrund ein */
.custom-option input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Wenn man auf das Optionsfeld klickt, wird ein innerer Punkt angezeigt */
.custom-option input:checked ~ .checkmark:after {
content: “”;
position: absolute;
display: block;
}
/* Ein innerer Punkt im benutzerdefinierten Radio Button */
.custom-option .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
```
Mit diesem Code erscheint beim Auswählen eines Radio-Buttons ein weißer Punkt in einem blauen Kreis. Anstatt des üblichen schwarzen Punkts im grauen Kreis, den die meisten Browser anzeigen. Denken Sie daran, dass Sie immer mit den Farben, Größen und Formen spielen können, um das gewünschte Erscheinungsbild zu erzielen.
