### [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

**Trecho:** Neste artigo, mostraremos como usar CSS para estilizar os campos de seleção e os botões de opção para que pareçam botões. 

**Conteúdo:**

Gostaria de personalizar os campos de **seleção** e **opção** para que pareçam botões? Usando [CSS](https://www.wpbeginner.com/glossary/css/ "O que é: CSS"), você pode facilmente alterar a exibição dessas entradas para botões com cores que combinam com a sua marca específica e até mesmo fazer com que se destaquem na página quando o usuário passar o mouse sobre cada seleção e para todas as seleções ativas. Neste tutorial, vamos guiá-lo por cada etapa para que você consiga fazer isso.

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

![Os campos de caixa de seleção e de múltipla escolha vêm com seu próprio CSS básico padrão para estilização](https://wpforms.com/wp-content/uploads/2020/10/wpforms-checkbox-radio-default-styling.jpg)No entanto, com a magia do CSS, você pode facilmente estilizar esses campos para que pareçam botões, em vez de apenas caixas a serem marcadas. Neste tutorial, forneceremos o CSS necessário para fazer essa alteração de estilo.

## Criando o formulário

Para começar, criaremos um novo formulário e adicionaremos nossos campos. Nosso formulário conterá um único campo **Caixa de seleção**, bem como um único campo **Escolha múltipla**.

À medida que cada um desses campos for adicionado, clique na guia **Avançado** e, no menu suspenso **Layout de Opções**, selecione **Inline**.

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

Agora é hora de adicionar nossa mágica 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 múltipla escolha para um formulário específico

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

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

Como alternativa, você pode alterar todos os seus campos **Caixa de seleção** e **Opção múltipla** para todos os formulários usando este CSS.

![Usando CSS, você 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 que correspondam às cores que você deseja usar.

E isso é tudo o que você precisa para personalizar os campos **Caixa de seleção** e **Botão de opção**. Você gostaria de personalizar também o campo **Números**? Dê uma olhada em 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

**Tags:** CSS

---