Como Personalizar os Estilos do Campo de Caixa de Seleção

Gostaria de personalizar a cor do campo Checkbox? Por defeito, este campo utilizará o estilo padrão da web para o exibir no seu formulário. Neste artigo, vamos mostrar-lhe como é fácil fazer isto com o poder do CSS!

No entanto, se estiver a usar o Editor de Blocos WPForms, pode ajustar facilmente estes estilos sem necessidade de CSS personalizado. Para saber mais sobre isso, consulte este guia útil. Ao alterar os Estilos de Campo e os Estilos de Botão, pode obter exatamente o mesmo no editor de blocos que pode com o CSS personalizado neste artigo.

Neste artigo, vamos trabalhar através do uso da magia do CSS personalizado para fazer estas alterações.

Criação do formulário

Para começar, criará o seu formulário e adicionará os campos de que necessita, que incluirão pelo menos um campo Checkbox.

Se precisar de alguma assistência na criação do seu formulário, pode rever facilmente este guia útil.

Depois de adicionar o campo Checkbox, clique no separador Avançado e, dentro das Classes CSS, adicione special-checkbox-buttons. Usaremos isto como um gatilho para chamar o nosso CSS personalizado.

Personalizar o estilo do campo Checkbox

Depois de guardar o formulário, pode agora adicionar o seu CSS. Se não tiver a certeza onde ou como adicionar CSS personalizado ao seu site, consulte este tutorial para obter assistência.

.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;
}

Este CSS alterará a cor da borda e da seleção para #e27730, mas também adicionará uma pequena animação à medida que as seleções são feitas.

Quer utilize o estilo do editor de blocos ou o CSS personalizado, pode facilmente personalizar as cores do campo Checkbox. Está à procura da mesma funcionalidade para o campo Múltipla Escolha? Dê uma vista de olhos ao nosso artigo sobre Como Personalizar os Estilos do Campo Múltipla Escolha.