Come cambiare colore al testo placeholder di Contact Form 7

07 Ott Come cambiare colore al testo placeholder di Contact Form 7

Uno dei piccoli problemi di stile del plugin Contact Form 7 è che alcune volte, ed è giusto dire anche che non sempre dipende da esso, nei campi del modulo di contatto che mostra online i testi placeholder non sono ben visibili per questioni cromatiche.
Partiamo dal presupposto che, se qualcuno non lo sapesse, i testi placeholder altro non sono che i testi all’interno di ogni rispettivo campo che consentono all’utente che deve compilarli di capire quali informazioni vanno inserite.

Nulla di più utile sicuramente, ma a volte capita che se si ha un modulo di contatto su uno sfondo completamente bianco ed i testi placeholder di colore altrettanto chiaro, quest’ultimi non si leggono (tanto che certe volte sembrano proprio non comparire ma in realtà ci sono), o comunque possiedono un colore talmente simile allo sfondo che un utente fatica ad interpretarli.

Per ovviare a questo problemino grafico, esiste un modo per cambiare colore al testo placeholder di Contact Form 7, di seguito infatti riporto un codice che risolve la questione, ma va comunque personalizzato in base alle vostre esigenze nel tag dei colori.

Per cominciare, il codice sottostante va copiato ed incollato nel classico percorso Aspetto > Personalizza > CSS Aggiuntivo.
Successivamente, la personalizzazione che richiede in bae al vostro sfondo è che vanno modificati tutti i tag color, sostituendo il codice esadecimale #000, che in questo caso equivale al nero assoluto, con uno di vostro gradimento e la modifica è fatta.

::-webkit-input-placeholder { /* WebKit browsers */
color: #000 !important;
opacity: 1;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #000 !important;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #000 !important;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #000 !important;
opacity: 1;
}