Cómo cambiar el color del texto de marcador de posición de una entrada

Este tutorial muestra cómo cambiar el color en el texto del marcador de una entrada de cualquier forma.

Cómo cambiar el color del texto de marcador de posición de una entrada

El atributo marcador de posición especifica un breve atisbo que describe el valor esperado del campo de entrada (por ejemplo, un valor de muestra o una breve descripción del formato esperado). La pista corta se muestra en el campo de entrada antes de que el usuario introduce el valor.

De forma predeterminada, el texto del marcador de posición tiene un color gris claro (en los navegadores de su aplicación hasta el momento). Para el estilo, que necesita de proveedores propiedades del prefijo CSS.

Con el fin de cambiar el color del marcador de posición por defecto, debe realizar lo siguiente:

1. Componer el código de acuerdo con la siguiente información (nota, hay que poner el mismo código 4 veces para el prefijo de cada proveedor):

   • El siguiente código cambiará el color del marcador para tales tipos de entradas: text, search, url, tel, email, y contraseña:

     					input::-webkit-input-placeholder {
     					color: red !important;
     					}
     					
     					input:-moz-placeholder { /* Firefox 18- */
     					color: red !important;  
     					}
     					
     					input::-moz-placeholder {  /* Firefox 19+ */
     					color: red !important;  
     					}
     					
     					input:-ms-input-placeholder {  
     					color: red !important;  
     					}
     				

     

   • El siguiente código cambiará el color del marcador de posición para áreas de texto (donde por lo general se introduce el cuerpo del mensaje del formulario de contacto):

     					textarea::-webkit-input-placeholder {
     					color: green !important;
     					}
     					
     					textarea:-moz-placeholder { /* Firefox 18- */
     					color: green !important;  
     					}
     					
     					textarea::-moz-placeholder {  /* Firefox 19+ */
     					color: green !important;  
     					}
     					
     					textarea:-ms-input-placeholder {  
     					color: green !important;  
     					}
     				

     

   • El siguiente código cambiará el color de marcador de posición específicamente para un cierto tipo de entrada, en nuestro caso email:

     					input[type="email"]::-webkit-input-placeholder {
     					color: blue !important;
     					}
     					
     					input[type="email"]:-moz-placeholder { /* Firefox 18- */
     					color: blue !important;  
     					}
     					
     					input[type="email"]::-moz-placeholder {  /* Firefox 19+ */
     					color: blue !important;  
     					}
     					
     					input[type="email"]:-ms-input-placeholder {  
     					color: blue !important;  
     					}
     				

     

2. Elija un archivo para colocar el código. Se puede poner en cualquier archivo CSS de su sitio, pero hemos preparado una lista de archivos recomendados para cada tipo de motor de plantillas:

   Plantillas CMS (CMS Templates):

   • WordPress Themes (WooCommerce/Jigoshop Themes) /wp-content/themes/themeXXXXX/style.css
   • Joomla Templates (VirtueMart Templates) /templates/themeXXXX/css/template.css
   • Drupal Themes /sites/all/themes/themeXXX/css/style.css
   • Web (HTML5) templates /css/style.css

   Plantillas E-commerce (E-commerce Templates):

   • Magento Themes /skin/frontend/default/themeXXX/css/styles.css
   • PrestaShop Themes /themes/themeXXXX/css/global.css
   • OpenCart Templates /catalog/view/theme/themeXXX/stylesheet/stylesheet.css
   • ZenCart Templates /includes/templates/themeXXX/css/stylesheet.css
   • osCommerce Templates /css/stylesheet.css
   • Shopify Themes style.css.liquid

3. Guarde los cambios y cargue el archivo CSS a su servidor.

No dude en revisar el video tutorial que se detalla a continuación:

How to change the placeholder text color of an input