Con HTML5 si sono introdotte tante novità nello sviluppo delle pagine web, e molte hanno agevolato il lavoro dei web develooper. Tra le più utilizzate vi è sicuramente l'attributo placeholder per i tag input e textarea.
L'attributo placeholder consente di specificare un testo, visualizzato all'interno di un tag input, come suggerimeto per l'utente di quello che il campo deve ricevere, e scompare non appena vi si clicca dentro (focus) per cominciare ad inserire il testo. Con il placeholder abbiamo un tooltip comodissimo, facile ed immediato da implementare per i nostri input, effetto che prima potevamo ottenere solo con "scomodi" script Javscript.
Fin qui tutto chiaro, ma il punto su cui desidero soffermarmi è il colore del testo del placeholder, che di default è grigio, e se volessimo cambiarlo? Per esigenze grafiche o altro, abbiamo necessità di cambiare il colore del testo inserito tramite placeholder. Come fare? Beh con i CSS ovviamente.
Supponiamo di avere il seguente tag input con il seguente attibuto placeholder:
<input type="text" name="fullname" placeholder="Inserisci qui il tuo nome e cognome" />
La scritta del placeholder "Inserisci qui il tuo nome e cognome" comparirà in grigio all'interno di questo tag input, e scomparirà non appena l'input riceverà il focus, ossia l'utente vi cliccherà dentro per inserirvi il testo.
Bene, adesso desideriamo cambiare il colore del testo mostrato dal placeholder, ricorriamo ai css, potremmo quindi scrivere così:
input[placeholder] {
color: red;
}Ma questo purtroppo non basta, vedrete il colore del testo del placeholder sempre grigio anzichè diventare rosso. Ancora una volta infatti, sebbene si parli di HTML5, l'incompatibilità cross-browser la fà da padrone anche in questo caso; i vari browser interpretano ed usano regole css distinte per il colore del testo del placeholder, quindi saremo costretti a scrivere una regola di style più o meno per ogni browser, in questo modo:
::-webkit-input-placeholder { /* WebKit browsers (Safari, Google Chrome, Opera 15+) */
color: red;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: red;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: red;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: red;
}Con queste regole css riusciremo a cambiare il colore del testo del placeholder con una corretta visualizzazione in quasi tutti i browser.
Ovviamente potete personalizzare queste regole css per il placeholder come desiderate, o più semplicemente assegnarle solo ad alcuni elementi o ad un solo tag input, infatti un uso molto comune che se ne fà è ad es nel classico tag input utilizzato per creare un search all'interno del proprio sito web. Supponiamo a tal proposito di voler fare il testo placeholder del search box nero, mentre gli altri placeholder resteranno di colore grigio, defineremo allora le regole di style in questo modo:
#search-text-box::-webkit-input-placeholder {color: #000;}
#search-text-box:-moz-placeholder {color: #000;}
#search-text-box::-moz-placeholder {color: #000;}
#search-text-box:-ms-input-placeholder {color: #000;}Chiunque voglia aggiungere qualcosa sull'argomento "Cambiare il colore del testo del placeholder" può farlo liberamente tramite i commenti, ogni vostro intervento sarà gradito e contribuira ad accrescere la discussione.
.jpg)
