Ispeziona webkit-input-placeholder con strumenti per sviluppatori


225

È possibile modellare il segnaposto di un input di testo con quanto segue:

-webkit-input-placeholder {
    color: red;
}

Sto guardando un sito Web online e vorrei usare lo stesso colore segnaposto di loro. È possibile capire di che colore hanno usato? Vorrei includere qualsiasi valore alfa, quindi non posso semplicemente campionare il colore con un editor di immagini.

Quando controllo l'elemento con Chrome Dev Tools, vedo:

inserisci qui la descrizione dell'immagine

Gli strumenti di sviluppo non forniscono informazioni sull'elemento segnaposto durante l'ispezione dell'elemento di input. C'è un altro modo?



17
No ... dichiaro chiaramente nella domanda che sono consapevole di come cambiarlo, ma che mi chiedo come ispezionare le proprietà di un'altra persona. Fornisco anche un esempio di codice che mostra che so come cambiarlo.
Sean Anderson,

qual è il sito web? Poiché il segnaposto è uno pseudo-elemento, dovresti comunque essere in grado di vedere gli stili durante l'ispezione di quell'elemento.
cport1,

Risposte:


458

L'avevo capito.

Il trucco è abilitare "Mostra DOM utente shadow agente" nel pannello Impostazioni di Chrome Developer Tools:

inserisci qui la descrizione dell'immagine

Per accedere alle impostazioni, fai clic sul pulsante "⋮" in alto a destra nel pannello Strumenti Dev, quindi fai clic su Impostazioni ed è nella scheda Preferenze predefinita.

Con quello, ora puoi vederlo:

inserisci qui la descrizione dell'immagine


5
L'impostazione è lì nel 62 e funziona magnificamente.
Isherwood,

Chrome 67 e la tua soluzione si applicano anche
gefrag

@gefrag Uso anche Chrome 67, ma non riesco a trovare questa opzione. Puoi per favore in quale scheda si trova ora?
Ben Carp,

Qualcuno sa come vedere lo ::placeholderpseudo-elemento che è ampiamente supportato ora?
swrobel,

2
@swrobel il flusso di lavoro menzionato in questa risposta ti consente di ispezionare ::placeholder. Vedi questa risposta correlata .
Kayce Basques,

33
  1. Per Google Chrome versione 69:
  2. Apri Ispeziona elementi: su Mac ⌘ + Maiusc + C, su Windows / Linux Ctrl + Maiusc + C O F12.
  3. Fai clic sul pulsante "⋮" in alto a destra, quindi vai su Impostazioni
  4. Nelle impostazioni fai clic su Preferenze> Fai clic su Mostra agente utente Shadow DOM

Le immagini seguenti mostrano il processo:

Vai su impostazioni> Preferenze:
Vai su impostazioni> Preferenze

Fai clic su Mostra user agent Shadow DOM:
inserisci qui la descrizione dell'immagine

Visualizza il CSS del segnaposto:
inserisci qui la descrizione dell'immagine

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.