### [Añadir transiciones a las selecciones de casillas de verificación y de opción múltiple](https://wpforms.com/developers/how-to-add-transitions-to-checkbox-and-multiple-choice-selections/) **Publicado:** 16 de junio de 2020 **Autor:** Umair Majeed **Extracto:** Este tutorial te mostrará cómo usar CSS para añadir transiciones geniales a los campos de formulario de casillas de verificación y opción múltiple. **Contenido:** ¿Te gustaría hacer que los campos de **casilla de verificación** y **opción múltiple** de tu formulario sean más atractivos? Al añadir transiciones suaves cuando se seleccionan las opciones, puedes mejorar el atractivo visual de tus formularios y la interacción del usuario. Esta guía te mostrará cómo implementar transiciones elegantes usando CSS. ## Configuración de tu formulario Primero, crea un formulario con campos de **casilla de verificación** y/o **opción múltiple**. Si necesitas ayuda para crear tu formulario, consulta nuestra [guía para crear tu primer formulario](https://wpforms.com/docs/creating-first-form/). Toma nota del ID de tu formulario y los IDs de los campos, ya que los necesitarás para el CSS. Si no estás seguro de cómo encontrar estos IDs, por favor revisa nuestra [guía sobre cómo encontrar los IDs de formulario y campo.](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/#locating-the-field-id) ## Añadir estilos de transición Para implementar las transiciones, necesitarás añadir CSS a tu sitio. Si no estás seguro de cómo añadir CSS personalizado, por favor consulta nuestra guía sobre [cómo añadir CSS a un sitio de WordPress](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/). El CSS anterior solo se aplicará al ID de formulario **999**. Esto deberá cambiarse para que coincida con tu propio ID de formulario. Los IDs de campo **field\_27** y **field\_3** también deberán actualizarse para que coincidan con los IDs de campo de tus campos de **casilla de verificación** y **opción múltiple** en tu formulario. Cada campo de **casilla de verificación** y **opción múltiple** tiene su propio ID, por lo que si tienes más de dos en tu formulario, simplemente duplicarías el CSS, cambiarías el número del ID de campo y separarías cada uno con una coma. Para obtener más información sobre las transiciones CSS, [puedes consultar esta documentación](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions). Y eso es todo, has añadido con éxito el CSS para crear una transición para **casilla de verificación** y **opción múltiple** en tu formulario. ¿Te gustaría añadir algún CSS que haga que los campos de texto del formulario resalten cuando el visitante esté escribiendo en ellos? Consulta nuestro tutorial sobre [Cómo añadir CSS al enfoque del campo del formulario](https://wpforms.com/developers/how-to-add-css-to-the-form-field-focus/ "Cómo añadir CSS al enfoque del campo del formulario"). **Categorías:** Estilo **Etiquetas:** CSS ---