Formas para cambiar el color (u otro estilo que le queramos dar) al atributo “placeholder” de los input o textarea de nuestros formularios. Por defecto observamos que es de un gris claro.
Para cambiar los estilos generales de “todos” los placeholder (ej. color de texto azul):
::-webkit-input-placeholder { color: blue; } /* WebKit */
:-moz-placeholder { color: blue; } /* Firefox 18- */
::-moz-placeholder { color: blue; } /* Firefox 19+ */
:-ms-input-placeholder { color: blue; } /* IE 10+ */
Y para cambiar los estilos de los placeholder de una clase en concreto (ej. color rojo y negrita):
.mi-input::-webkit-input-placeholder { color: red; font-weight :bold; }
.mi-input:-moz-placeholder { color: red; font-weight: bold; }
.mi-input::-moz-placeholder { color: red; font-weight: bold; }
.mi-input:-ms-input-placeholder { color: red; font-weight: bold; }
El texto de placeholder en las celdas de formularios (input) viene por defecto en un tono gris claro. Para cambiarlo tan solo debemos añadir las siguientes propiedades con prefijos específicos del navegador (webkit y mozilla).
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
/* all */
::-webkit-input-placeholder { color:#555; }
::-moz-placeholder { color:#555; } /* firefox 19+ */
:-ms-input-placeholder { color:#555; } /* ie */
input:-moz-placeholder { color:#555; }
/* individual: webkit */
#nombre::-webkit-input-placeholder { color: orange; }
#apellidos::-webkit-input-placeholder { color: green; text-transform:uppercase; }
/* individual: mozilla */
#nombre::-moz-placeholder { color: orange; }
#apellidos::-moz-placeholder { color: green; text-transform:uppercase; }
|