[Cómo] Cambiar el color del texto del marcador de posición del formulario de contacto 7

¿Sabía que el Formulario de contacto 7 le permite cambiar el color del texto del marcador de posición?

Si alguna vez ha utilizado el Formulario de contacto 7, es posible que haya notado que tiene un color de texto de marcador de posición predeterminado. Puede personalizar el texto del marcador de posición utilizando las opciones integradas de Contact Form 7, ¡o incluso personalizarlo con CSS!

Este artículo mostrará cómo cambiar el color del texto del marcador de posición del formulario de contacto 7 y proporcionará ejemplos de código para ambos métodos.

Contenido[Mostrar]

Hemos descubierto que muchos clientes en nuestro foro de soporte tienen problemas para configurar o cambiar el color de fuente del texto del marcador de posición del formulario de contacto 7.

El formulario de contacto 7 es uno de los complementos de WordPress más populares en la actualidad, lo que le permite crear formularios de contacto básicos o complejos en su sitio de WordPress. Ya hemos escrito cómo corregir errores en el envío de mensajes del Formulario de contacto 7.

Le mostraremos cómo personalizar el color del texto con código personalizado: si no está familiarizado con la codificación pero necesita un complemento de creación de formularios más simple y fácil de usar, pruebe WPForms.

CSS para texto de marcador de posición CF7

::-webkit-input-placeholder { /* WebKit browsers */
    color: #000 !important;
    opacity: 1;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #000 !important;
    opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #000 !important;
    opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #000 !important;
    opacity: 1;
}

Utilice la etiqueta! Important

La etiqueta "! Important" se utiliza para garantizar que no se apliquen otros estilos a estos selectores CSS. Esto asegura que el estilo funcione. Si desea que el estilo se use solo en los campos del formulario de contacto 7, puede usar esto:

.wpcf7 :: - webkit-input-placeholder {/ * Navegadores WebKit * / color: # 000! important; opacidad: 1; }

Si necesita exponer un formulario de contacto específico en su sitio sin alterar otros formularios de contacto 7, busque el identificador del formulario de la siguiente manera:

cambiar el texto del marcador de posición cf7

Haga clic con el botón derecho en el elemento en cuestión y seleccione Inspeccionar elemento. Accesos directos: F11 (Windows) o CMD + MAYÚS + C (MAC) Busque el ID y reemplace 'wpcf_id' con él en este código:

#wpcf_id :: placeholder {color: # 000! important; opacidad: 1; }

¡No dude en dejar un comentario o hacer una pregunta a continuación!

Sobre el autor
David Attard
Autor: David AttardPagina Web: https://www.linkedin.com/in/dattard/
David ha estado trabajando en o alrededor de la industria digital / en línea durante los últimos 18 años. Tiene una vasta experiencia en las industrias de software y diseño web utilizando WordPress, Joomla y los nichos que los rodean. Como consultor digital, su enfoque es ayudar a las empresas a obtener una ventaja competitiva utilizando una combinación de su sitio web y plataformas digitales disponibles en la actualidad.

Una cosa más... ¿Sabías que las personas que comparten cosas útiles como esta publicación también se ven IMPRESIONANTES? ;-)
Por favor deja un eficiente Comente con sus pensamientos, luego comparta esto en su (s) grupo (s) de Facebook que lo encontrarán útil y cosechemos los beneficios juntos. ¡Gracias por compartir y ser amable!

Divulgación: Esta página puede contener enlaces a sitios externos para productos que amamos y recomendamos de todo corazón. Si compra productos que le sugerimos, es posible que ganemos una tarifa de referencia. Tales tarifas no influyen en nuestras recomendaciones y no aceptamos pagos por reseñas positivas.

Autor (es) destacado en:  Logotipo de la revista Inc   Logotipo de Sitepoint   Logotipo de CSS Tricks    logotipo de webdesignerdepot   Logotipo de WPMU DEV   y muchos más ...