Como personalizar os estilos de campo de escolha múltipla

Gostaria de personalizar a cor do campo de Escolha múltipla? Por predefinição, este campo utilizará o estilo Web padrão para apresentar o campo no seu formulário. Neste artigo, vamos mostrar como é fácil fazer isso com o poder do CSS!

estilo predefinido de escolha múltipla

No entanto, se estiver a usar o WPForms Block Editor, pode ajustar facilmente estes estilos sem a necessidade de CSS personalizado. Para ler mais sobre isso, por favor, dê uma olhada neste guia útil. Ao alterar os Estilos de Campo e os Estilos de Botão, você pode conseguir exatamente o mesmo no editor de blocos que você pode com o CSS personalizado neste artigo.

Se utilizar o estilo personalizado do editor de blocos, pode alterar estas cores sem ter de adicionar CSS personalizadas

A utilização do editor de blocos Button Styles não só altera o botão Submeter e o campo de escolha múltipla, como também altera as cores do campo Caixa de verificação.

Neste artigo, vamos trabalhar com a magia das CSS personalizadas para efetuar estas alterações.

Criar o formulário

Para começar, crie o seu formulário e adicione os campos necessários, que incluirão, pelo menos, um campo de escolha múltipla.

Se precisar de ajuda para criar o seu formulário, pode facilmente consultar este guia útil.

Depois de ter adicionado o Escolha múltipla clique no campo Avançado e dentro do separador Classes CSS adicionar special-radio-buttons. Utilizaremos isto como um acionador para chamar o nosso CSS personalizado.

adicione a classe CSS única ao campo Classes CSS e guarde o formulário.

Personalizar o estilo do campo de escolha múltipla

Depois de salvar o formulário, você pode adicionar seu CSS. Se não tiver a certeza de onde ou como adicionar CSS personalizado ao seu site, consulte 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 irá alterar a cor do contorno e da seleção para #e27730 mas também adiciona uma pequena animação à medida que as selecções são feitas.

Com este CSS, pode personalizar facilmente os campos de escolha múltipla para alterar a sua cor

Quer utilize o estilo do editor de blocos ou o CSS personalizado, pode facilmente personalizar as cores do campo de Escolha múltipla. Sabia que também pode transformar as opções do campo Múltipla escolha em botões? Dê uma olhada em nosso tutorial sobre Como personalizar campos de caixa de seleção e de rádio para parecerem botões.