### [Adicionar Transições a Seleções de Caixa de Seleção e Múltipla Escolha](https://wpforms.com/developers/how-to-add-transitions-to-checkbox-and-multiple-choice-selections/) **Publicado:** 16 de junho de 2020 **Autor:** Umair Majeed **Resumo:** Este tutorial mostrar-lhe-á como usar CSS para adicionar algumas transições interessantes aos campos de formulário de Caixa 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, pode melhorar o apelo visual dos seus formulários e a interação do utilizador. Este guia mostrar-lhe-á como implementar transições elegantes usando CSS. ## Configurar o Seu Formulário Primeiro, crie um formulário com campos de **Caixa de Seleção** e/ou **Múltipla Escolha**. Se precisar de ajuda para criar o seu formulário, consulte o nosso [guia sobre como criar o seu primeiro formulário](https://wpforms.com/docs/creating-first-form/). Anote o ID do seu formulário e os IDs dos campos, pois precisará deles para o CSS. Se não tiver a certeza de como encontrar estes IDs, reveja o nosso [guia sobre como encontrar IDs de formulário e de campo.](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/#locating-the-field-id) ## Adicionar Estilos de Transição Para implementar as transições, precisará de adicionar CSS ao seu site. Se não tiver a certeza de como adicionar CSS personalizado, consulte o nosso guia sobre [como adicionar estilos CSS personalizados para WPForms](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/). O CSS acima será aplicado apenas ao ID do formulário **999**. Isto precisará de ser alterado para corresponder ao seu próprio ID de formulário. Os IDs dos campos **field\_27** e **field\_3** também precisarão de ser atualizados para corresponder aos IDs dos campos para os seus campos de **Caixa de Seleção** e **Múltipla Escolha** no seu formulário. Cada campo de **Caixa de Seleção** e **Múltipla Escolha** tem o seu próprio ID, pelo que se 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, [pode consultar esta documentação](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions). E é tudo, adicionou com sucesso o CSS para criar uma transição para **Caixa de Seleção** e **Múltipla Escolha** no seu formulário. Gostaria de adicionar algum CSS que faça os campos de texto do formulário destacarem-se da página quando o visitante estiver a escrever neles? Consulte o 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:** Estilização **Tags:** CSS ---