In questo manuale spiegheremo diversi metodi per cambiare il colore del segnaposto di input usando CSS.
Metodo 1: modificare il colore del segnaposto di input utilizzando il selettore '::placeholder'.
CSS “ ::segnaposto Il selettore ” viene utilizzato per selezionare gli elementi del modulo con il testo segnaposto. Può essere utilizzato per modificare il testo segnaposto. È inoltre possibile utilizzare questo selettore per modificare il colore del segnaposto di input.
Sintassi
La sintassi del ::placeholder è la seguente:
:: segnaposto {
colore : valore
}
Al posto di ' valore ”, è possibile impostare il colore del segnaposto di input in base alla nostra scelta.
Passiamo all'esempio pratico, dove cambieremo il colore del segnaposto di input.
Esempio
Per modificare il colore del segnaposto di input, in primo luogo, creeremo un elemento di input utilizzando il tag e imposteremo il tipo di input come ' testo ”. Quindi, imposta il testo del segnaposto di input come ' accedere il tuo nome ”.
HTML
< corpo >< ingresso genere = 'testo' segnaposto = 'Inserisci il tuo nome' >
< / corpo >
L'output del codice fornito è:
Il colore predefinito del segnaposto di input è mostrato nell'immagine sopra indicata.
Ora passiamo al CSS e utilizziamo ' ::segnaposto ” per accedere al testo del segnaposto di input e impostarne il colore come “ RGB(17, 0, 255) ”.
CSS
:: segnaposto {colore : rgb ( 17 , 0 , 255 ) ;
}
Come puoi vedere, il colore del segnaposto di input aggiunto è cambiato in blu:
C'è un altro metodo per cambiare il colore del segnaposto di input. Controlliamolo.
Metodo 2: modifica del colore del segnaposto di input utilizzando l'elemento di pseudo-classe '::-webkit-input-placeholder'
“ :: – segnaposto di input webkit L'elemento pseudo-classe rappresenta principalmente il testo segnaposto di un elemento del modulo. Può essere utilizzato da progettisti e sviluppatori di temi per personalizzare l'aspetto del testo segnaposto. Inoltre, utilizzando l'elemento specificato l'utente può modificare il colore di un segnaposto di input.
Sintassi
La sintassi del ::-webkit-input-placeholder è data come:
:: -segnaposto di input webkit {colore : valore
}
Al posto di ' valore ”, è possibile impostare il colore del segnaposto di input.
Passiamo all'esempio per comprendere l'elemento di pseudo-classe sopra discusso.
Esempio
Nel file CSS, usa il ' ::-webkit-input-segnaposto ” elemento di pseudo-classe e assegna il valore di color come “ RGB(255, 13, 13) ”:
:::: -segnaposto di input webkit {colore : rgb ( 255 , 13 , 13 ) ;
}
Produzione
Qui puoi vedere che il colore predefinito del segnaposto di input è cambiato.
Conclusione
Il colore del segnaposto di input viene modificato utilizzando ' ::segnaposto ” selettore e “ :: – segnaposto di input webkit ” elemento di pseudo-classe. Usando questo, puoi cambiare il colore predefinito del segnaposto di input. In questo articolo abbiamo spiegato la procedura relativa alla modifica del colore del segnaposto di input utilizzando le proprietà CSS.