CSS ::placeholder Pseudo Elemento
Usa il selettore CSS ::placeholder per selezionare elementi con testo segnaposto. Scopri il pseudo-elemento con esempi pratici.
Il pseudo-elemento ::placeholder seleziona il testo segnaposto di un campo modulo — il breve suggerimento mostrato all'interno di un <input> o di un <textarea> vuoto, che scompare non appena l'utente inizia a digitare. Corrisponde solo agli elementi che hanno l'attributo placeholder. Per impostazione predefinita, i browser mostrano il testo segnaposto in un colore grigio chiaro o semi-trasparente.
Il testo del suggerimento proviene dall'attributo HTML placeholder, mentre ::placeholder consente di personalizzarne l'aspetto — colore, font e così via.
Quando usarlo
Ricorri a ::placeholder quando vuoi che il suggerimento sia leggibile sullo sfondo del modulo, o per adattarlo ai colori del tuo brand. Alcune cose da sapere prima di stilizzarlo:
- Si applica solo un insieme limitato di proprietà. Poiché il segnaposto è "contenuto pseudo", puoi usare proprietà che agiscono sul testo stesso —
color,font-*,letter-spacing,text-decoration,opacity,backgrounde alcune altre. Le proprietà di layout (comemarginowidth) non hanno effetto. - Mantieni un contrasto sufficiente. Il grigio chiaro predefinito spesso non soddisfa le linee guida sull'accessibilità. Se modifichi il colore, assicurati che il testo rimanga leggibile.
- Un segnaposto non è un'etichetta. Scompare non appena l'utente digita, quindi non deve mai sostituire un vero
<label>. Usalo per un valore di esempio, non per il nome del campo.
I prefissi vendor (-webkit-, -moz-, -ms-) sono obsoleti e non necessari per i browser moderni. Il selettore standard ::placeholder è supportato ovunque, quindi puoi scrivere tranquillamente una singola regola ::placeholder.
Versione
Sintassi
Esempio di sintassi CSS ::placeholder
::placeholder {
css declarations;
}Esempio del selettore ::placeholder:
Esempio 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>Esempio del selettore ::placeholder utilizzato in un modulo:
Esempio di codice 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>Esempio del selettore ::placeholder con l'attributo autofocus di HTML <input>:
Esempio HTML di 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>Argomenti correlati
- Selettore CSS
:focus— stilizza un campo mentre l'utente sta digitando. - Proprietà CSS
color— la proprietà che si combina più spesso con::placeholder. - Tag HTML
<input>e tag HTML<textarea>— gli elementi che supportano l'attributoplaceholder.