### [Como Personalizar os Estilos do Campo de Múltipla Escolha](https://wpforms.com/developers/how-to-customize-the-multiple-choice-field-styles/)
**Publicado:** 6 de fevereiro de 2024
**Autor:** Equipe Editorial
**Resumo:** Este artigo mostrará como personalizar as cores do campo de Múltipla Escolha usando CSS.
**Conteúdo:**
Gostaria de personalizar a cor do campo de **Múltipla Escolha**? Por padrão, este campo usará a estilização padrão da web para exibir o campo no seu formulário. Neste artigo, vamos guiá-lo através da facilidade de fazer isso com o poder do CSS!
No entanto, se você estiver usando o **Editor de Blocos WPForms**, pode ajustar facilmente esses estilos sem a necessidade de CSS personalizado. Para saber mais sobre isso, [dê uma olhada neste guia útil](https://wpforms.com/how-to-style-wpforms-using-the-block-editor/ "Como Estilizar WPForms Usando o Editor de Blocos"). 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.
Usar os **Estilos de Botão** do editor de blocos não apenas altera o botão **Enviar** e o campo de **Múltipla Escolha**, mas também altera as cores do campo de **Caixa de Seleção**.
Neste artigo, vamos trabalhar usando a magia do CSS personalizado para fazer essas alterações.
## Criando o formulário
Para começar, crie seu formulário e adicione os campos necessários, que incluirão pelo menos um campo de **Múltipla Escolha**.
Se precisar de alguma assistência na criação do seu formulário, [você pode facilmente revisar este guia útil](https://wpforms.com/docs/creating-first-form/ "Criando Seu Primeiro Formulário").
Depois de adicionar o campo de **Múltipla Escolha**, clique na aba **Avançado** e, dentro das **Classes CSS**, adicione `special-radio-buttons`. Usaremos isso como um gatilho para chamar nosso CSS personalizado.
## Personalizando o estilo do campo de 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 assistência](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Como Adicionar Estilos CSS Personalizados para WPForms").
```
.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 mudará 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 de **Múltipla Escolha**. Você sabia que também pode fazer com que as opções do campo de **Múltipla Escolha** pareçam botões? Dê uma olhada em nosso tutorial sobre [Como Personalizar Campos de Caixa de Seleção e Rádio para Parecerem Botões](https://wpforms.com/developers/how-to-customize-checkbox-and-radio-fields-to-look-like-buttons/ "Como Personalizar Campos de Caixa de Seleção e Rádio para Parecerem Botões").
**Categorias:** Campos
**Tags:** CSS
---