Come modificare il colore dei segnapunti di input usando CSS

Un segnaposto input specifica l'input previsto dall'utente fornendo suggerimenti o descrizioni. La maggior parte dei suggerimenti e delle descrizioni scompaiono quando specificano qualcosa nel campo di input. Per impostazione predefinita, il colore del segnaposto input è grigio; Tuttavia, in alcune condizioni, è importante modificare il colore del segnaposto input per aumentare la sua visibilità.

In questo manuale, spiegheremo diversi metodi per cambiare il colore del segnaposto input usando CSS.

Metodo 1: modifica il colore del segnaposto in input usando il selettore ":: segnaposto"

CSS ":: segnaposto"Il selettore viene utilizzato per selezionare gli elementi del modulo con il testo segnaposto. Può essere utilizzato per cambiare il testo del segnaposto. Inoltre, è possibile utilizzare questo selettore per modificare il colore del segnaposto input.

Sintassi

La sintassi del segnaposto :: è la seguente:

:: Placeholder
Colore: valore

Al posto di "valore", Puoi impostare il colore del segnaposto input secondo la nostra scelta.

Passiamo all'esempio pratico, dove cambieremo il colore del segnaposto input.

Esempio

Per modificare il colore del segnaposto input, in primo luogo, creeremo un elemento di input usando il tag e imposteremo il tipo di input come "testo". Successivamente, imposta il testo del segnaposto input come "accedere il tuo nome".

Html

L'output del codice dato è:

Il colore predefinito del segnaposto di input è mostrato nell'immagine sopra data.

Ora ci spostiamo al CSS e usiamo ":: segnaposto"Per accedere al testo del segnaposto input e impostare il suo colore come"RGB (17, 0, 255)".

CSS

:: Placeholder
Colore: RGB (17, 0, 255);

Come puoi vedere, il colore del segnaposto input aggiunto viene modificato in blu:

C'è un altro metodo per cambiare il colore del segnaposto input. Controlliamolo.

Metodo 2: Modifica il colore del segnaposto input usando "::-Webkit-Input-Placeholder" Elemento pseudo-Classe

":::-WebKit-Input-Holuber"L'elemento pseudo-classe rappresenta principalmente il testo segnaposto di un elemento di forma. Può essere utilizzato da progettisti e sviluppatori a tema per personalizzare l'aspetto del testo dei segnaposto. Inoltre, utilizzando l'elemento specificato L'utente può modificare il colore di un segnaposto input.

Sintassi

La sintassi di ::-Webkit-Input-Placeholder è data come:

::-WebKit-Input-Placeholder
Colore: valore

Al posto di "valore", Puoi impostare il colore del segnaposto input.

Passiamo all'esempio per comprendere l'elemento pseudo-class sopra discusso.

Esempio

Nel file CSS, usa il “::-Webkit-Input-Holtrar"Elemento di classe pseudo e assegnare il valore del colore come"RGB (255, 13, 13)":

::::-WebKit-Input-Placeholder
Colore: RGB (255, 13, 13);

Produzione

Qui, puoi vedere che il colore predefinito del segnaposto input viene modificato.

Conclusione

Il colore del segnaposto input viene modificato usando il ":: segnaposto"Selettore e":::-WebKit-Input-Holuber"Elemento pseudo-Classe. Usando questo, è possibile modificare il colore predefinito del segnaposto input. In questo articolo, abbiamo spiegato la procedura relativa alla modifica del colore del segnaposto in input utilizzando le proprietà CSS.