Riassunto AI
Vuoi personalizzare i campi Checkbox e Radio per farli assomigliare a pulsanti? Usando CSS puoi cambiare facilmente la visualizzazione di questi input in pulsanti che hanno colori abbinati al tuo marchio specifico e persino risaltano dalla pagina quando l'utente passa il mouse su ogni selezione e per qualsiasi selezione attiva. In questo tutorial, ti guideremo passo dopo passo su come ottenere questo risultato.
Per impostazione predefinita, i campi modulo Checkbox appaiono con una casella davanti all'etichetta da selezionare. Anche i campi modulo Radio hanno lo stesso stile predefinito.
Tuttavia, con la magia del CSS, puoi facilmente stilizzare questi campi per farli assomigliare a pulsanti invece che a semplici caselle da selezionare. In questo tutorial, ti forniremo il CSS necessario per apportare questa modifica di stile.
Creazione del modulo
Per iniziare, creeremo un nuovo modulo e aggiungeremo i nostri campi. Il nostro modulo conterrà un singolo campo Checkbox e un singolo campo Scelta Multipla.
Man mano che questi campi vengono aggiunti, fai clic sulla scheda Avanzate e dal menu a discesa Layout Scelta, seleziona Inline.
Aggiunta del CSS
Ora è il momento di aggiungere la nostra magia CSS. Copia e incolla semplicemente questo CSS sul tuo sito.
Se hai bisogno di aiuto su come e dove aggiungere CSS al tuo sito, dai un'occhiata a questo tutorial.
Campi Checkbox e Scelta Multipla per un modulo specifico
Tutti i campi Checkbox e Scelta Multipla per tutti i moduli
In alternativa, potresti cambiare tutti i tuoi campi Checkbox e Scelta Multipla per tutti i moduli usando questo CSS.
E questo è tutto ciò che ti serve per personalizzare i campi Checkbox e Radio. Vuoi personalizzare anche il campo Numeri? Dai un'occhiata al nostro tutorial su Come Rimuovere le Frecce sul Campo Numeri.