### [Como personalizar caixas de seleção e botões de opção para que pareçam botões](https://wpforms.com/developers/how-to-customize-checkbox-and-radio-fields-to-look-like-buttons/)

**Publicado:** 30 de outubro de 2020
**Autor:** Umair Majeed

**Excerto:** Neste artigo, vamos mostrar-lhe como usar CSS para estilizar as caixas de seleção e os botões de opção para que pareçam botões. 

**Conteúdo:**

Gostaria de personalizar as caixas de seleção e os botões de opção para que pareçam botões? Usando [CSS](https://www.wpbeginner.com/glossary/css/ "O que é: CSS"), pode facilmente alterar a apresentação destas entradas para botões com cores que combinam com a sua marca específica e até mesmo destacá-los na página quando o utilizador passa o cursor sobre cada seleção e para todas as seleções ativas. Neste tutorial, vamos guiá-lo passo a passo sobre como conseguir isso.

Por predefinição, os campos de formulário **Caixa de seleção** aparecem com uma caixa à frente do rótulo a ser marcado. Os campos de formulário **Opção de rádio** também têm o mesmo estilo de formulário predefinido.

![Os campos de caixa de seleção e de escolha múltipla vêm com o seu próprio CSS base predefinido para o estilo](https://wpforms.com/wp-content/uploads/2020/10/wpforms-checkbox-radio-default-styling.jpg)No entanto, com a magia do CSS, pode facilmente estilizar estes campos para que pareçam botões em vez de apenas caixas a marcar. Neste tutorial, iremos fornecer-lhe o CSS necessário para efetuar esta alteração de estilo.

## Criar o formulário

Para começar, vamos criar um novo formulário e adicionar os nossos campos. O nosso formulário irá conter um único campo **Caixa de seleção**, bem como um único campo **Escolha múltipla**.

À medida que cada um destes campos for adicionado, clique no separador **Avançado** e, no menu suspenso **Layout de escolha**, selecione **Inline**.

![adicione os seus campos e defina o Layout de escolha dos campos de caixa de seleção e escolha múltipla para Inline na guia Avançado](https://wpforms.com/wp-content/uploads/2020/10/wpforms-choice-layout-inline.jpg)## Adicionar o CSS

Agora é hora de adicionar a nossa magia CSS. Basta copiar e colar este CSS no seu site.

Se precisar de ajuda sobre como e onde adicionar CSS ao seu site, [consulte este tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Como adicionar estilos CSS personalizados para o WPForms").

#### Campos de caixa de seleção e de escolha múltipla para um formulário específico

Lembre-se de alterar o `form#wpforms-form-1000` para corresponder ao seu próprio ID de formulário. Para obter ajuda sobre como encontrar o seu ID de formulário específico, [consulte este tutorial](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/).

#### Todos os campos de caixa de seleção e escolha múltipla para todos os formulários

Em alternativa, pode alterar todos os seus campos **Caixa de seleção** e **Escolha múltipla** para todos os formulários utilizando este CSS.

![Utilizando CSS, pode personalizar campos de caixa de seleção e botões de opção para que pareçam botões](https://wpforms.com/wp-content/uploads/2020/10/wpforms-checkbox-radio-buttons-css.jpg)Lembre-se apenas de atualizar quaisquer referências de cor no CSS para corresponder às cores que deseja utilizar.

E isso é tudo o que precisa para personalizar os campos **Caixa de seleção** e **Botão de opção**. Gostaria também de personalizar o campo **Números**? Dê uma vista de olhos no nosso tutorial sobre [Como remover as setas do campo Números](https://wpforms.com/developers/how-to-remove-the-arrows-on-the-numbers-field/ "Como remover as setas do campo Números").

**Categorias:** Campos

**Etiquetas:** CSS

---