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.
El pseudoelemento ::primera línea es el único subconjunto de propiedades CSS que es aplicable y se puede aplicar en una regla usando ::marcador de posición en su selector. De forma predeterminada, la apariencia del texto del marcador de posición es de color gris claro o translúcido para la mayoría de los navegadores.
Sintaxis:
::placeholder {
// CSS property
}
Comprenderemos el concepto de ::selector de marcador de posición y su implementación a través de los ejemplos.
Ejemplo 1: Este ejemplo ilustra el ::selector de marcador de posición para cambiar el color del texto junto con el color de fondo para el texto del marcador de posición.
HTML
<!DOCTYPE html>
<html>
<head>
<title>::placeholder selector</title>
<style>
input::placeholder {
background-color: #fff;
margin: 10px;
padding: 5px;
color: Green;
}
h1 {
color: green;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>Geeksforgeeks</h1>
<h2>::placeholder selector</h2>
<p>Name:
<input placeholder="GeeksforGeeks">
</p>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo ilustra el ::selector de marcador de posición para configurar el texto del marcador de posición con su atributo que identifica la sugerencia que describe el valor esperado de un campo de entrada.
HTML
<!DOCTYPE html>
<html>
<head>
<title>::placeholder selector</title>
<style>
h1 {
color: green;
}
body {
text-align: center
}
input::placeholder {
background-color: white;
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<h2>::placeholder Selector </h2>
<input type="text"
placeholder="Geeks">
<input type="text"
placeholder="Computer Science">
</body>
</html>
Producción:
Navegador compatible: los navegadores compatibles con ::placeholder selector se enumeran a continuación:
- Google Chrome 57.0, 4.0 -webkit-
- Microsoft Edge 12.0 -webkit-, 10.0 -ms-
- Firefox 51.0, 4.0 -moz-
- Safari 10.1, 5.0 -webkit-
- Opera 44.0, 15.0 -webkit-
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA