Come personalizzare gli stili del campo scelta multipla

Vuoi personalizzare il colore del campo Scelta multipla? Per impostazione predefinita, questo campo utilizzerà lo stile web standard per visualizzare il campo nel tuo modulo. In questo articolo, ti guideremo attraverso la facilità con cui è possibile farlo con la potenza del CSS!

Tuttavia, se stai utilizzando l'Editor a blocchi di WPForms, puoi facilmente regolare questi stili senza la necessità di CSS personalizzato. Per saperne di più, dai un'occhiata a questa utile guida. Quando modifichi gli Stili dei campi e gli Stili dei pulsanti, puoi ottenere esattamente la stessa cosa nell'editor a blocchi che puoi ottenere con il CSS personalizzato in questo articolo.

In questo articolo, lavoreremo utilizzando la magia del CSS personalizzato per apportare queste modifiche.

Creazione del modulo

Per iniziare, creerai il tuo modulo e aggiungerai i campi necessari, che includeranno almeno un campo Scelta multipla.

Se hai bisogno di assistenza nella creazione del tuo modulo, puoi facilmente consultare questa utile guida.

Una volta aggiunto il campo Scelta multipla, fai clic sulla scheda Avanzate e all'interno delle Classi CSS aggiungi special-radio-buttons. Lo useremo come trigger per richiamare il nostro CSS personalizzato.

Personalizzazione dello stile del campo Scelta multipla

Una volta salvato il modulo, puoi aggiungere il tuo CSS. Se non sei sicuro di dove o come aggiungere CSS personalizzato al tuo sito, consulta questo tutorial per assistenza.

.special-radio-buttons input[type=radio] {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: #ffffff !important;
    margin: 0 !important;
    color: #e27730 !important;
    width: 1.15em !important;
    height: 1.15em !important;
    border: 0.15em solid #e27730 !important;
    border-radius: 50% !important;
    transform: translateY(-0.075em) !important;
    display: grid !important;
    place-content: center !important;
}

.special-radio-buttons input[type=radio]:checked:before {
    transform: scale(1) !important;
}

.special-radio-buttons input[type=radio]:before {
    content: "" !important;
    border-radius: 50% !important;
    transform: scale(0) !important;
    transition: 120ms transform ease-in-out !important;
    box-shadow: inset 1em 1em #e27730 !important;
    border: 1px solid #e27730 !important;
}

.special-radio-buttons input[type=radio]:checked:after {
    background-color: #e27730 !important;
}

Questo CSS cambierà il colore del bordo e della selezione in #e27730, ma aggiungerà anche una piccola animazione quando vengono effettuate le selezioni.

Sia che utilizzi lo stile dell'editor a blocchi o il CSS personalizzato, puoi facilmente personalizzare i colori del campo Scelta multipla. Sapevi che puoi anche far sì che le opzioni del campo Scelta multipla assomiglino a pulsanti? Dai un'occhiata al nostro tutorial su Come personalizzare i campi Casella di controllo e Radio per farli sembrare pulsanti.