¿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.
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:
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!
Haga 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.