### [Adicionando transições às seleções de caixas de seleção e opções múltiplas](https://wpforms.com/developers/how-to-add-transitions-to-checkbox-and-multiple-choice-selections/)

**Publicado:** 16 de junho de 2020
**Autor:** Umair Majeed

**Trecho:** Este tutorial mostrará como usar CSS para adicionar transições interessantes aos campos de formulário de caixas de seleção e múltipla escolha. 

**Conteúdo:**

Gostaria de tornar os campos de **caixa de seleção** e **múltipla escolha** do seu formulário mais envolventes? Ao adicionar transições suaves quando as opções são selecionadas, você pode aprimorar o apelo visual dos seus formulários e melhorar a interação do usuário.

Este guia mostrará como implementar transições elegantes usando CSS.

## Configurando seu formulário

Primeiro, crie um formulário com campos **caixa de seleção** e/ou **escolha múltipla**. Se precisar de ajuda para criar seu formulário, confira nosso [guia sobre como criar seu primeiro formulário](https://wpforms.com/docs/creating-first-form/).

Anote o ID do seu formulário e os IDs dos campos, pois você precisará deles para o CSS. Se não souber como encontrar esses IDs, consulte nosso [guia sobre como encontrar IDs de formulários e campos](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/#locating-the-field-id)

## Adicionando estilos de transição

Para implementar as transições, você precisará adicionar CSS ao seu site. Se não souber como adicionar CSS personalizado, consulte nosso guia sobre [como adicionar CSS a um site WordPress](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/).

![após adicionar o CSS, você poderá ver a caixa de seleção e a opção de múltipla escolha com transição CSS](https://wpforms.com/wp-content/uploads/2020/06/css-transitions-checkbox.gif)O CSS acima será aplicado apenas ao ID do formulário **999**. Isso precisará ser alterado para corresponder ao ID do seu próprio formulário. Os IDs de campo **field\_27** e **field\_3** também precisarão ser atualizados para corresponder aos IDs de campo dos seus campos **Caixa de seleção** e **Escolha múltipla** no seu formulário.

Cada campo **Checkbox** e **Multiple Choice** tem seu próprio ID; portanto, se você tiver mais de dois no seu formulário, basta duplicar o CSS, alterar o número do ID do campo e separar cada um com uma vírgula.

Para saber mais sobre transições CSS, [você pode dar uma olhada nesta documentação](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions).

E é isso, você adicionou com sucesso o CSS para criar uma transição para **Checkbox** e **Multiple Choice** no seu formulário.

Gostaria de adicionar um CSS que faça com que os campos de texto do formulário se destaquem na página quando o visitante estiver digitando neles? Confira nosso tutorial sobre [Como adicionar CSS ao foco do campo do formulário](https://wpforms.com/developers/how-to-add-css-to-the-form-field-focus/ "Como adicionar CSS ao foco do campo do formulário").

**Categorias:** Estilo

**Tags:** CSS

---