Como Personalizar os Estilos do Campo de Escolha Múltipla

Gostaria de personalizar a cor do campo Múltipla Escolha? Por defeito, este campo utilizará o estilo padrão da web para apresentar o campo no seu formulário. Neste artigo, vamos guiá-lo através da facilidade com que isto pode ser feito 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 Múltipla Escolha.

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

Depois de adicionar o campo Múltipla Escolha, clique no separador Avançado e, dentro das Classes CSS, adicione special-radio-buttons. Utilizaremos isto como um gatilho para chamar o nosso CSS personalizado.

Personalizar o estilo do campo Múltipla Escolha

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-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 à 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 Múltipla Escolha. Sabia que também pode fazer com que as opções do campo Múltipla Escolha pareçam botões? Dê uma vista de olhos no nosso tutorial sobre Como Personalizar Campos de Caixa de Seleção e Rádio para Parecerem Botões.