No estándar
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
Resumen
La pseudo-clase propietaria y no estándar :-ms-input-placeholder representa el texto del marcador de posición (placeholder) de un elemento de un formulario. Esto permite personalizar el texto de los marcadores de posición (placeholders) a los desarrolladores web y a los diseñadores de temas. Sólo es soportada por los navegadores Internet Explorer y Microsoft Edge.
Ejemplo
El siguiente ejemplo destaca con un estilo personalizado los campos "Branch" y código "ID". El texto del marcardor de posición (placeholder) se muestra con un estilo hasta que el campo obtiene el foco, momento a partir del cual podemos escribir en él. Cuando el campo obtiene el foco vuelve a tener el estilo normal para un campo input y el texto del marcador de posición (placeholder) desaparece.
HTML
<form id="test">
<p><label>Enter Student Name: <input id="name" placeholder="Student Name"/></label></p>
<p><label>Enter Student Branch: <input id="branch" placeholder="Student Branch" /></label></p>
<p><label>Enter Student ID: <input type="num" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id" /></label></p>
<input type="submit" />
</form>
CSS
input {
background-color:#E8E8E8;
color:black; }
/* placeholder only style */
input.studentid:-ms-input-placeholder {
font-style:italic;
color: red;
background-color: yellow;
}
Resultado
Especificaciones
No es parte de ninguna especificación aunque Microsoft tiene una descripción en MSDN.
Compatibilidad con los distintos navegadores
| Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Soporte básico | Sin soporte | Sin soporte | 10 | Sin soporte | Sin soporte |
| Característica | Android | Firefox Mobile (Gecko) | Firefox OS | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Soporte básico | Sin soporte | Sin soporte | Sin soporte | (Yes) | Sin soporte | Sin soporte |