Per creare pulsanti di opzione personalizzati in CSS, puoi utilizzare diversi approcci. Ecco un esempio di come potresti farlo:
1. HTML: Creare l’input dell’opzione e l’etichetta associata.
```
```
1. CSS: Personalizzare l’aspetto del pulsante di opzione.
```
/* Nascondere il pulsante di opzione predefinito */
.custom-radio input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Creare un cerchio personalizzato */
.custom-radio .checkmark {
position: relative;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #ccc;
border-radius: 50%;
}
/* Creare l’indicatore (il cerchio interno) */
.custom-radio .checkmark:after {
content: “”;
position: absolute;
display: none;
}
.custom-radio input:checked ~ .checkmark:after {
display: block;
}
.custom-radio .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
/* Cambiare colore quando il pulsante viene selezionato */
.custom-radio input:checked ~ .checkmark {
background-color: #2196F3;
}
```
Ricorda che questo è solo un esempio per illustrare come potrebbe essere il processo. Puoi personalizzare l’aspetto del pulsante di opzione nel modo che preferisci, adattandolo alle tue esigenze di design e stile. Assicurati solo di mantenere la funzionalità del pulsante di opzione.
(jQuery o JavaScript potrebbero essere necessari se si desidera fare qualcosa di più complesso, come management dello stato attivo o altre funzionalità).
