Come stilizzare il testo segnaposto per i campi del modulo

Sei interessato a personalizzare l'aspetto del testo segnaposto nei campi del tuo modulo WPForms? Con poche righe di CSS personalizzato, puoi ottenerlo facilmente. Il testo segnaposto funge da informazione temporanea all'interno di un campo e scompare quando un utente interagisce con il campo. Nel seguente articolo, ti guideremo attraverso il processo di stilizzazione del testo segnaposto per i campi del tuo modulo.

Tieni presente che lo stile predefinito per il testo segnaposto potrebbe essere ereditato da diverse fonti, tra cui il tuo tema WordPress, le impostazioni di WPForms (a seconda delle tue impostazioni) o le impostazioni del browser dell'utente.

Prima di iniziare a stilizzare i segnaposto, dobbiamo prima creare un modulo che utilizzi questo testo. Una volta creato il tuo modulo, dovrai aggiungere il tuo testo Segnaposto per ogni campo dalla scheda Avanzate delle impostazioni del campo.

Stilizzazione del testo segnaposto

Quando si stilizza il testo segnaposto, è essenziale includere diversi selettori, ognuno con il proprio prefisso del venditore. Ciò garantisce che gli stili vengano applicati in modo coerente su diversi browser e versioni. Sebbene il CSS possa sembrare ripetitivo, l'inclusione di tutti i selettori è fondamentale per un supporto completo del browser.

Per implementare questi stili sul tuo sito, aggiungi semplicemente il seguente CSS. Se non sei sicuro di dove o come aggiungere CSS personalizzato, puoi fare riferimento al nostro tutorial sull'argomento.

Il CSS fornito di seguito cambierà tutto il testo segnaposto di WPForms in un colore arancione (#e27730):

.wpforms-container ::-webkit-input-placeholder { /* Chrome and Safari */
   color: #e27730 !important;
}
 
.wpforms-container :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #e27730 !important;
   opacity: 1 !important;
}
 
.wpforms-container ::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #e27730 !important;
   opacity: 1 !important;
}
 
.wpforms-container :-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #e27730 !important;
}
 
.wpforms-container ::-ms-input-placeholder { /* Microsoft Edge */
   color: #e27730 !important;
}
 
.wpforms-container ::placeholder {
   color: #e27730 !important;
}

Firefox applicherà automaticamente una opacità inferiore a tutti i segnaposto dei campi del modulo, rendendoli più trasparenti rispetto ad altri browser.

Ciò è già stato affrontato nel CSS sopra impostando l'opacità per il CSS specifico di Firefox su opacità: 1;

Ed ecco tutto ciò che ti serve per stilizzare il testo segnaposto. Desideri modificare lo stile del messaggio di conferma utilizzando il CSS? Nel nostro tutorial, Come rimuovere lo stile della casella del messaggio di conferma, ti mostreremo come modificare questo stile.

FAQ

D: Posso usare questo CSS per stilizzare un campo a discesa?

R: Se desideri stilizzare il campo a discesa, dai un'occhiata a questo articolo invece.