CSS Color del Marcador

Marcadores de Posición, color gris con frecuencia los elementos de texto dentro de una entrada, puede ser un dolor de estilo. Afortunadamente, hemos obtenido un pequeño pero eficaz solución CSS el estilo de entrada de texto de marcador de cualquier color y opacidad que desee. Para leer sobre el código.

Cambiar color texto de marcador

Vamos a empezar con una simple entrada y algunos marcadores de posición de texto, para este ejemplo usaremos la palabra 'search' pero se puede utilizar cualquier cosa que desee. El formato HTML básico es el siguiente:

HTML
<body>
  <input placeholder="Search">
</body>

Entrada (y textarea) marcador de posición de texto predeterminado de un color gris claro, sin embargo, podemos cambiar esto con unas pocas líneas de CSS .Aquí se color rojo el texto de entrada mediante un nombre de color HTML, pero cualquier color será suficiente (Hex, RGB, HSL).

CSS
::-webkit-input-placeholder { /* Chrome */
  color: red;
}
:-ms-input-placeholder { /* IE 10+ */
  color: red;
}
::-moz-placeholder { /* Firefox 19+ */
  color: red;
  opacity: 1;
}
:-moz-placeholder { /* Firefox 4 - 18 */
  color: red;
  opacity: 1;
}

Demo en CodePen

Tenga en cuenta que es importante que se incluyan los distintos proveedores prefijos con el fin de apoyar como muchos navegadores como sea posible. Firefox Sólo texto de marcador de entrada por defecto en una ligera transparencia su innecesaria establecer la propiedad Opacity en IE o Chrome.

Marcador Cambio focus color de texto

Muy bien, hemos logrado cambiar el color del texto de marcador de rojo, pero sería bueno si algo ocurre cuando un usuario hace clic dentro de nuestra entrada. Utilizando el mismo proveedor prefijo propiedades de CSS, podemos alterar la opacidad de la entrada texto de marcador de posición en foco.

CSS
input {
  outline: none;
  padding: 12px;
  border-radius: 3px;
  border: 1px solid black;
}
::-webkit-input-placeholder { /* Chrome */
  color: red;
  transition: opacity 250ms ease-in-out;
}
:focus::-webkit-input-placeholder {
  opacity: 0.5;
}
:-ms-input-placeholder { /* IE 10+ */
  color: red;
  transition: opacity 250ms ease-in-out;
}
:focus:-ms-input-placeholder {
  opacity: 0.5;
}
::-moz-placeholder { /* Firefox 19+ */
  color: red;
  opacity: 1;
  transition: opacity 250ms ease-in-out;
}
:focus::-moz-placeholder {
  opacity: 0.5;
}
:-moz-placeholder { /* Firefox 4 - 18 */
  color: red;
  opacity: 1;
  transition: opacity 250ms ease-in-out;
}
:focus:-moz-placeholder {
  opacity: 0.5;
}

Demo en CodePen

En el ejemplo anterior hemos tirado a un pocos estilos básicos en la propia entrada, y agregó una transición en la opacidad para hacer la experiencia un poco más agradable. Echa un vistazo a la demo y experimentar con otras propiedades de CSS y las transiciones.