Cómo dar estilo al texto de marcador de posición para campos de formulario

¿Te interesa personalizar la apariencia del texto de marcador de posición en los campos de tu formulario de 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 él. En el siguiente artículo, te guiaremos a través del proceso de estilo del texto de marcador de posición para los campos de tu 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 empezar a aplicar estilos 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.

Estilo del texto de marcador de posición

Al aplicar estilos 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 compatibilidad integral con los navegadores.

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 and Safari */
   color: #e27730 !important;
}
 
.wpforms-container :-moz-placeholder { /* Mozilla Firefox 4 to 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 menor a los marcadores de posición de todos los campos del formulario, haciéndolos más transparentes que en otros navegadores.

Eso 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 aplicar estilos 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, te mostraremos cómo cambiar este estilo.

Preguntas frecuentes

P: ¿Puedo usar este CSS para aplicar estilo a un campo desplegable?

R: Si deseas aplicar estilo al campo Desplegable, echa un vistazo a este artículo en su lugar.