Implementación
Hay tres implementaciones diferentes: pseudo-elementos, pseudo-clases y nada.
- WebKit, Blink (Safari, Google Chrome, Opera 15+) y Microsoft Edge están utilizando un pseudo-elemento:
::-webkit-input-placeholder
. [ Ref ]
- Mozilla Firefox 4 a 18 está utilizando una pseudoclase:
:-moz-placeholder
( un colon). [ Ref ]
- Mozilla Firefox 19+ está utilizando un pseudo-elemento:
::-moz-placeholder
pero el selector anterior seguirá funcionando durante un tiempo. [ Ref ]
- Internet Explorer 10 y 11 están utilizando una pseudo-clase:
:-ms-input-placeholder
. [ Ref ]
- Abril de 2017: la mayoría de los navegadores modernos admiten el pseudo-elemento simple
::placeholder
[ Ref ]
Internet Explorer 9 y versiones anteriores no admiten el placeholder
atributo en absoluto, mientras que Opera 12 y versiones inferiores no admiten ningún selector CSS para marcadores de posición.
La discusión sobre la mejor implementación aún continúa. Tenga en cuenta que los pseudoelementos actúan como elementos reales en Shadow DOM . A padding
en un input
no obtendrá el mismo color de fondo que el pseudo-elemento.
Selectores CSS
Los agentes de usuario deben ignorar una regla con un selector desconocido. Ver Selectores Nivel 3 :
un grupo de selectores que contiene un selector no válido no es válido.
Por lo tanto, necesitamos reglas separadas para cada navegador. De lo contrario, todo el grupo sería ignorado por todos los navegadores.
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #909;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #909;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #909;
}
::placeholder { /* Most modern browsers support this now. */
color: #909;
}
<input placeholder="Stack Snippets are awesome!">
Notas de uso
- Tenga cuidado para evitar malos contrastes. El marcador de posición de Firefox parece estar predeterminado con una opacidad reducida, por lo que debe usarse
opacity: 1
aquí.
- Tenga en cuenta que el texto del marcador de posición solo se corta si no encaja: dimensione sus elementos de entrada
em
y pruébelos con una configuración de tamaño de fuente mínimo grande. No olvide las traducciones: algunos idiomas necesitan más espacio para la misma palabra.
placeholder
También se deben probar los navegadores con soporte HTML pero sin soporte CSS para eso (como Opera).
- Algunos navegadores usan CSS predeterminado adicional para algunos
input
tipos ( email
, search
). Estos pueden afectar la representación de formas inesperadas. Usa las propiedades -webkit-appearance
y -moz-appearance
para cambiar eso. Ejemplo:
[type="search"] {
-moz-appearance: textfield;
-webkit-appearance: textfield;
appearance: textfield;
}