HTML - dar estilo a placeholder

 
Vista:
sin imagen de perfil
Val: 6
Ha aumentado su posición en 22 puestos en HTML (en relación al último mes)
Gráfica de HTML

dar estilo a placeholder

Publicado por jose maria (63 intervenciones) el 05/06/2014 18:44:52
hola, encontre este codigo que da estilo a los placeholder de los inputs:

1
2
3
input::-webkit-input-placeholder {
    color:    #000000;
}

luego buscando mas encontre las diferentes variantes para los diferentes navegadores (o asi lo interpreto yo)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
::-webkit-input-placeholder {
   color: red;
}
 
:-moz-placeholder { /* Firefox 18- */
   color: red;
}
 
::-moz-placeholder {  /* Firefox 19+ */
   color: red;
}
 
:-ms-input-placeholder {
   color: red;
}

ahora bien, lo inserte para hacer pruebas y lo meti dentro de un pequeño codigo con dos inputs y los dos cojen el mismo estilo, la pregunta es
¿como se podria hacer para que cada input tenga un estilo?
gracias

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<title>
</title>
<style type="text/css">
input::-webkit-input-placeholder {
    color: #000000;
}
 
</style>
</head>
<body>
input:
<br>
<input name="name" type="text" id="input" placeholder="Palabra" size="30" maxlength="10" />
<br>
<input name="name2" type="text" id="id_name" placeholder="Palabra" size="30" maxlength="10" />
 
</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 1.144
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

dar estilo a placeholder

Publicado por xve (1543 intervenciones) el 05/06/2014 20:58:04
Hola Jose maria, lo manera básica que se me ocurre, es utilizando clases:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
<style type="text/css">
.primero::-webkit-input-placeholder {
	color: #000;
}
.segundo::-webkit-input-placeholder {
	color: #f00;
}
</style>
</head>
<body>
	<br>
	<input class="primero" name="name" type="text" id="input" placeholder="Palabra" size="30" maxlength="10" />
	<br>
	<input class="segundo" name="name2" type="text" id="id_name" placeholder="Palabra" size="30" maxlength="10" />
</body>
</html>

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar