Come personalizzare gli stili del campo Casella di controllo

Vuoi personalizzare il colore del campo Checkbox? Per impostazione predefinita, questo campo utilizzerà lo stile web standard per visualizzare il campo nel tuo modulo. In questo articolo, ti mostreremo quanto è facile 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 di cui hai bisogno, che includeranno almeno un campo Checkbox.

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

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

Personalizzazione dello stile del campo Checkbox

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-checkbox-buttons input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: #fff !important;
  margin: 0 !important;
  font: inherit !important;
  color: #e27730 !important;
  width: 1.15em !important;
  height: 1.15em !important;
  border: 0.15em solid #e27730 !important;
  border-radius: 0.15em !important;
  transform: translateY(-0.075em) !important;
  display: grid !important;
  place-content: center !important;
}

.special-checkbox-buttons input[type="checkbox"]::before {
  content: "" !important;
  width: 0.65em !important;
  height: 0.65em !important;
  transform: scale(0) !important;
  transition: 120ms transform ease-in-out !important;
  box-shadow: inset 1em 1em #e27730 !important;
	transform-origin: bottom left !important;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%) !important;
}

.special-checkbox-buttons input[type="checkbox"]:checked::before {
    transform: scale(1) !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}

.special-checkbox-buttons input[type=checkbox]:checked:after {
	content: none !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 del blocco editor o il CSS personalizzato, puoi facilmente personalizzare i colori del campo Checkbox. Stai cercando la stessa funzionalità per il campo Multiple Choice? Dai un'occhiata al nostro articolo su Come personalizzare gli stili del campo Multiple Choice.