Back

Gestire l’Attributo Placeholder in CSS – Cross Browser

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!

Luca Carchesio
Luca Carchesio
https://www.carchesio.it/
Luca Carchesio classe 79 - Web Designer, Specialista SEO, Formatore ICP e Relatore della Corso Specialistico di Marketing e Personal Branding in Prometeo Coaching®. Opera Professionalmente nel mondo digitale dal 2003 e vanta un esperienza importante nella comunicazione visiva. Coach Professionista e Consigliere Nazionale A.Co.I.

Questo Sito utilizza cookie tecnici e Cookie di terze parti per offrirti una navigazione migliore. Informativa sui Cookie