Come personalizzare l’aspetto dell’attributo placeholder con i CSS?
Stai per caso Impazzendo per gestire, con i fogli di Stile, i Campi Input Placeholder?
L’Attributo Placeholder può essere inserito nel tag input (text, search, url, tel, email) in modo da applicare, all’interno di una casella input testuale appunto, un “valore, un’istruzione o una dicitura” che può essere sia un testo che un’immagine.
Ecco un esempio di input con l’attributo placeholder:
<input type="text" placeholder="Inserisci il Nome*">
Perchè il placeholder oltre al Label? L’Attributo placeholder può essere complementare all’etichetta (label) e non dev’essere un’alternativa. Ecco a te la sintassi CSS per gestire e attribuire uno stile tutto tuo al Placeholder:
::-webkit-input-placeholder {padding-left:6px;color: #424242; } Chrome / Opera / Safari ::-moz-placeholder {padding-left:6px;color: #424242; } Firefox 19+ :-ms-input-placeholder {padding-left:6px;color: #424242; } IE 10+ :-moz-placeholder {padding-left:6px;color: #424242; } Firefox 18-
Copia il codice soprastante e incollalo nel tuo foglio di stile. Nel codice ho inserito 2 indicazioni per il placeholder: “spostati” da sinistra di 6 pixel e colorami il carattere del placeholder di grigio.
Sei pronto a personalizzare i tuoi Placeholder? Buon Lavoro!
Ti è piaciuto l’articolo?
A Presto!
