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

Gostaria de personalizar a cor do campo Checkbox? Por padrão, este campo usará a estilização padrão da web para exibi-lo em seu formulário. Neste artigo, mostraremos como é fácil fazer isso com o poder do CSS!

No entanto, se você estiver usando o Editor de Blocos do WPForms, poderá ajustar facilmente esses estilos sem a necessidade de CSS personalizado. Para saber mais sobre isso, dê uma olhada neste guia útil. Ao alterar os Estilos de Campo e os Estilos de Botão, você pode obter exatamente o mesmo no editor de blocos que pode com o CSS personalizado neste artigo.

Neste artigo, vamos trabalhar usando a magia do CSS personalizado para fazer essas alterações.

Criando o formulário

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

Se precisar de ajuda para criar seu formulário, você pode facilmente revisar este guia útil.

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

Personalizando o estilo do campo Checkbox

Depois de salvar o formulário, você pode adicionar seu CSS. Se não tiver certeza de onde ou como adicionar CSS personalizado ao seu site, revise este tutorial para obter ajuda.

.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 conforme as seleções são feitas.

Seja usando a estilização do editor de blocos ou o CSS personalizado, você pode facilmente personalizar as cores do campo Checkbox. Você está procurando a mesma funcionalidade para o campo Múltipla Escolha? Dê uma olhada em nosso artigo sobre Como Personalizar os Estilos do Campo Múltipla Escolha.