Como Personalizar os Estilos do Campo de Múltipla Escolha

Gostaria de personalizar a cor do campo Múltipla Escolha? Por padrão, este campo usará a estilização padrão da web para exibi-lo em seu formulário. Neste artigo, vamos guiá-lo por quão 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 Múltipla Escolha.

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

Depois de adicionar o campo Múltipla Escolha, clique na guia Avançado e, dentro de Classes CSS, adicione special-radio-buttons. Usaremos isso como um gatilho para chamar nosso CSS personalizado.

Personalizando o estilo do campo Múltipla Escolha

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

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.

Quer você use a estilização do editor de blocos ou o CSS personalizado, você pode facilmente personalizar as cores do campo Múltipla Escolha. Você sabia que também pode fazer as opções do campo Múltipla Escolha parecerem botões? Dê uma olhada em nosso tutorial sobre Como Personalizar Campos de Caixa de Seleção e Rádio para Parecerem Botões.