### [Cómo dar estilo al texto de marcador de posición para los campos del formulario](https://wpforms.com/developers/style-placeholder-text-for-form-fields/)
**Publicado:** 14 de octubre de 2019
**Autor:** Equipo Editorial
**Extracto:** Este fragmento de CSS te ayudará a dar estilo al texto de marcador de posición para que coincida con tu marca personalizada en tu sitio.
**Contenido:**
¿Estás interesado en personalizar la apariencia del texto de marcador de posición en los campos de tu formulario WPForms? Con unas pocas líneas de CSS personalizado, puedes lograrlo fácilmente. El texto de marcador de posición sirve como información temporal dentro de un campo y desaparece cuando un usuario interactúa con el campo. En el siguiente artículo, te guiaremos a través del proceso de dar estilo al texto de marcador de posición para tus campos de formulario.
Ten en cuenta que el estilo predeterminado del texto de marcador de posición puede heredarse de diferentes fuentes, incluido tu tema de WordPress, la configuración de WPForms (dependiendo de tu configuración) o la configuración del navegador del usuario.
Antes de comenzar a dar estilo a los marcadores de posición, primero debemos crear un formulario que utilice este texto. Una vez que hayas creado tu formulario, deberás agregar tu texto de **Marcador de posición** para cada campo desde la pestaña **Avanzado** de la configuración del campo.
Si necesitas ayuda para agregar texto de marcador de posición, [revisa esta documentación](https://wpforms.com/docs/how-to-add-placeholder-text-to-a-form-field/ "Cómo agregar texto de marcador de posición a un campo de formulario").
## Dar estilo al texto de marcador de posición
Al dar estilo al texto de marcador de posición, es esencial incluir varios selectores, cada uno con su propio prefijo de proveedor. Esto asegura que los estilos se apliquen de manera consistente en diferentes navegadores y versiones. Si bien el CSS puede parecer repetitivo, incluir todos los selectores es crucial para una cobertura completa del navegador.
Para implementar estos estilos en tu sitio, simplemente agrega el siguiente CSS. Si no estás seguro de dónde o cómo agregar CSS personalizado, puedes consultar nuestro tutorial sobre el tema.
El CSS proporcionado a continuación cambiará todo el texto de marcador de posición de WPForms a un color naranja (#e27730):
```
.wpforms-container ::-webkit-input-placeholder { /* Chrome y Safari */
color: #e27730 !important;
}
.wpforms-container :-moz-placeholder { /* Mozilla Firefox 4 a 18 */
color: #e27730 !important;
opacity: 1 !important;
}
.wpforms-container ::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #e27730 !important;
opacity: 1 !important;
}
.wpforms-container :-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #e27730 !important;
}
.wpforms-container ::-ms-input-placeholder { /* Microsoft Edge */
color: #e27730 !important;
}
.wpforms-container ::placeholder {
color: #e27730 !important;
}
```
Firefox aplicará automáticamente una [opacidad](https://www.w3schools.com/cssref/css3_pr_opacity.asp "Propiedad CSS de opacidad") menor a todos los marcadores de posición de los campos del formulario, haciéndolos más transparentes que en otros navegadores.
Esto ya está abordado en el CSS anterior al establecer la opacidad para el CSS específico de Firefox en **opacidad: 1;**
Y eso es todo lo que necesitas para dar estilo al texto de marcador de posición. ¿Te gustaría cambiar el estilo del mensaje de confirmación usando CSS? En nuestro tutorial, [Cómo eliminar el estilo de la caja del mensaje de confirmación](https://wpforms.com/developers/how-to-remove-confirmation-message-box-styling/ "Cómo eliminar el estilo de la caja del mensaje de confirmación"), te mostraremos cómo cambiar este estilo.
## Preguntas frecuentes
#### P: ¿Puedo usar este CSS para dar estilo a un campo desplegable?
**R:** Si deseas dar estilo al campo **Desplegable**, [consulta este artículo en su lugar](https://wpforms.com/developers/how-to-style-the-dropdown-field/ "Cómo dar estilo al campo desplegable").
**Categorías:** Estilo
**Etiquetas:** CSS, Texto de marcador de posición
---