Pseudoelemento ::placeholder de CSS
El pseudoelemento `::placeholder` se utiliza para dar estilo al texto de marcador de posición de los elementos de formulario. El selector `::placeholder` se aplica únicamente a los elementos <input> y <textarea> que tienen un atributo placeholder. Por defecto, la apariencia del texto de marcador de posición es de color gris claro o semitransparente en la mayoría de los navegadores.
El texto de marcador de posición se establece con el atributo placeholder, que especifica una pista que describe el valor esperado de un campo de entrada.
INFO
Los prefijos de proveedor (-webkit-, -moz-, -ms-) son obsoletos y no son necesarios para los navegadores modernos. El selector estándar `::placeholder` es compatible en todas partes.
Versión
Sintaxis
Ejemplo de sintaxis de CSS ::placeholder
::placeholder {
css declarations;
}Ejemplo del selector ::placeholder:
Ejemplo de CSS ::placeholder
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input::placeholder {
color: #1c87c9;
font-size: 1.2em;
font-style: italic;
}
</style>
</head>
<body>
<h2>::placeholder selector example</h2>
<input placeholder="Type here..." />
</body>
</html>Ejemplo del selector ::placeholder utilizado en un formulario:
Ejemplo de código CSS ::placeholder
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
* {
box-sizing: border-box;
}
.container {
margin: 20px auto;
max-width: 250px;
background-color: #8ebf42;
padding: 20px;
}
input {
border: 1px solid #666666;
background-color: #eeeeee;
padding: 15px;
margin-bottom: 20px;
display: block;
width: 100%;
}
input::-webkit-input-placeholder {
color: #666666;
}
input::-moz-placeholder {
color: #666666;
}
input:-ms-input-placeholder {
color: #666666;
}
input::placeholder {
color: #666666;
}
</style>
</head>
<body>
<h2>::placeholder selector example</h2>
<div class="container">
<form>
<input type="text" placeholder="Lorem ipsum is simply..." />
<input type="date" placeholder="DD/MM/YYYY" />
</form>
</div>
</body>
</html>Ejemplo del selector ::placeholder con el atributo autofocus de HTML <input>:
Ejemplo de HTML de placeholder
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
label {
display: block;
color: #777777;
margin: 0 0 4px;
}
input {
border: 1px solid transparent;
padding: 15px;
font-size: 1.2em;
outline: 0;
}
input::placeholder {
color: #8ebf42;
}
label,
input {
font-family: sans-serif;
}
</style>
</head>
<body>
<h2>::placeholder selector example</h2>
<form action="#">
<div>
<label for="name">Name:</label>
<input id="name" name="name" type="text" placeholder="Enter your name here" autofocus />
</div>
</form>
</body>
</html>Practice
¿Qué implica el pseudoelemento ::placeholder en CSS?