### [Estilo de los campos de texto en tus formularios](https://wpforms.com/developers/how-to-customize-the-styling-of-text-based-form-fields/)
**Publicado:** 4 de febrero de 2022
**Autor:** Umair Majeed
**Extracto:** Este tutorial te mostrará varias formas diferentes de estilizar campos de formulario basados en texto usando CSS, desde cambiar el color, el tamaño hasta forzar minúsculas o mayúsculas.
**Contenido:**
¿Te gustaría personalizar la apariencia del texto en los campos de tu formulario? Desde tamaños de fuente y colores hasta la transformación del texto, puedes mejorar fácilmente los campos de texto de tu formulario con CSS simple.
Esta guía te mostrará cómo estilizar varios campos basados en texto como Correo electrónico, Texto de una sola línea y Texto de párrafo.
Esta guía no cubre el campo Editor de texto enriquecido, ya que está diseñado para ser controlado por los usuarios del formulario.
## Configuración de tu formulario
Primero, necesitarás crear tu formulario y agregar tus campos. Para este tutorial, agregaremos los campos **Nombre**, **Correo electrónico**, **Texto de una sola línea** y **Texto de párrafo**.
Si necesitas ayuda para crear tu formulario, consulta nuestra [documentación de creación de formularios](https://wpforms.com/docs/creating-first-form/).
No apliques estos estilos CSS a los campos de Contraseña. Hacerlo interferirá con la función de fortaleza de contraseña y puede impedir el envío del formulario.
## Añadir estilos personalizados
Veamos diferentes formas de estilizar tus campos de texto. Para obtener ayuda sobre cómo agregar CSS a tu sitio, consulta este tutorial sobre [cómo agregar CSS personalizado](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/).
Al apuntar a formularios o campos específicos, deberás reemplazar **-999** con el ID real de tu formulario y los IDs de los campos. Si necesitas ayuda para encontrar estos IDs, consulta nuestra guía sobre [cómo localizar IDs de formularios y campos](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/).
#### Tamaño del texto
Para cambiar el tamaño del texto dentro de los campos del formulario:
###### Para todos los formularios
```
.wpforms-form input {
font-size: 20px !important;
}
```
###### Para un campo específico dentro de un formulario específico
```
#wpforms-999-field_1-container input {
font-size: 20px !important;
}
```
#### Color del texto
Para modificar el color del texto en los campos del formulario:
###### Para todos los formularios
```
.wpforms-form input {
color: #000000 !important;
}
```
###### Para un campo específico dentro de un formulario específico
```
#wpforms-999-field_1-container input {
color: #000000 !important;
}
```
#### Transformación del texto
Para controlar la capitalización del texto:
###### Para todos los formularios
```
.wpforms-form input {
text-transform: capitalize !important;
}
```
###### Para un campo específico dentro de un formulario específico
```
#wpforms-999-field_1-container input {
text-transform: capitalize !important;
}
```
Valores **text-transform** disponibles:
- **lowercase**: Fuerza que todo el texto esté en minúsculas
- **uppercase**: Fuerza que todo el texto esté en mayúsculas
- **capitalize**: Pone en mayúscula la primera letra de cada palabra
Y eso es todo lo que necesitas para personalizar el estilo de los campos de formulario basados en texto.
WPForms tiene muchos tutoriales de CSS. ¿Por qué no [consultar otros tutoriales de CSS viendo nuestra lista completa](https://wpforms.com/developers/tags/css/ "Fragmentos de CSS para desarrolladores de WPForms"). Los actualizamos regularmente, así que sigue revisando. Pero si buscas información más específica sobre cómo usar CSS, [¡únete a nuestro Círculo VIP de WPForms y pregúntanos allí](https://www.facebook.com/groups/wpformsvip "Únete al Círculo VIP de WPForms para consejos rápidos y tutoriales")!
Si tienes solicitudes específicas para ver más tutoriales sobre CSS, ¡no dudes en contactarnos dentro de la [Comunidad VIP de WPForms en Facebook](https://www.facebook.com/groups/wpformsvip "Comunidad VIP de WPForms en Facebook")!
**Categorías:** Estilo
**Etiquetas:** CSS
---