La pseudoclase CSS :placeholder-shown selecciona el elemento de entrada o el elemento de área de texto que tiene texto de marcador de posición. La principal diferencia entre :placeholder-shown y ::placeholder es que :placeholder-shown sirve para seleccionar la entrada en sí cuando se muestra el texto del marcador de posición, mientras que ::placeholder trata de dar estilo al texto del marcador de posición.
Sintaxis:
:placeholder-shown
{
/* CSS Property */
}
Ejemplo 1: a continuación se muestra el ejemplo que ilustra el uso de la propiedad :placeholder-shown .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
input {
border: 1px solid black;
padding: 10px;
}
input:placeholder-shown {
border-color: rgb(255, 114, 58);
color: rgb(24, 187, 97);
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<input placeholder="Computer Science portal !">
</body>
</html>
Producción:
Ejemplo 2: a continuación se muestra el ejemplo que ilustra el uso de la propiedad :placeholder-shown .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
input.studentid:placeholder-shown {
background-color: yellow;
color: red;
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<form>
<p>
<label for="branch">Enter Geek Name:</label>
<input id="branch" placeholder="Geek Branch" />
</p>
<p>
<label>Enter Geek ID:</label>
<input type="number" pattern="[0-9]{7}"
class="studentid" placeholder="7 digit id" />
</p>
</form>
</body>
</html>
Producción:
Navegadores compatibles:
- Cromo
- Firefox
- Safari
- Ópera
- Borde
- Internet Explorer (no compatible).
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA