El selector de marcador de posición en el pseudoelemento CSS se usa para diseñar el texto del marcador de posición cambiando el color del texto y permite modificar el estilo del texto. En la mayoría de los navegadores, el marcador de posición (dentro de la etiqueta de entrada) es de color gris. Para cambiar el color de este marcador de posición, se pueden usar selectores de marcador de posición::no estándar, que implementan el atributo de color en ese selector en particular. Este selector varía de un navegador a otro. Por ejemplo, para los navegadores Google Chrome, Mozilla Firefox y Opera, etc., los selectores se pueden implementar como:
Sintaxis:
::placeholder
-
Para Internet Explorer:
:-ms-input-placeholder
-
Para Microsoft Edge:
::-ms-input-placeholder
Ejemplo 1: este código muestra el uso de ::selectores de marcador de posición en diferentes navegadores.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Change Placeholder Color</title>
<style>
::placeholder {
/* Firefox, Chrome, Opera */
color: blue;
}
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: red;
}
::-ms-input-placeholder {
/* Microsoft Edge */
color: orange;
}
</style>
</head>
<body>
<p>Change Placeholder Color</p>
<input type="text" placeholder="Enter your Text">
</body>
</html>
Producción:
-
En Google Chrome:
-
En Microsoft Edge:
-
En Internet Explorer:
Nota: Internet Explorer ya no admite el selector de marcador de posición.
Ejemplo 2 : este código implementa un selector de marcador de posición en el atributo de correo electrónico de la etiqueta de entrada. Los selectores de marcador de posición se pueden aplicar a cualquier atributo (texto, teléfono, contraseña, etc.) de la etiqueta de entrada, para resaltar los cambios de color en cualquier atributo diferente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Change Placeholder Color</title>
<style>
input[type="email"]::placeholder {
/* Firefox, Chrome, Opera */
color: blue;
}
input[type="email"]:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: red;
}
input[type="email"]::-ms-input-placeholder {
/* Microsoft Edge */
color: orange;
}
</style>
</head>
<body>
<p>Change Placeholder Color</p>
<input type="email" placeholder="Enter your Email">
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por bilal-hungund y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA