Inspectez l'espace réservé d'entrée webkit avec des outils de développement

225

Il est possible de styliser l'espace réservé d'une entrée de texte avec les éléments suivants:

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

Je consulte un site Web en ligne et j'aimerais utiliser la même couleur d'espace réservé qu'eux. Est-il possible de comprendre quelle couleur ils ont utilisée? Je voudrais inclure toutes les valeurs alpha, donc je ne peux pas simplement échantillonner la couleur avec un éditeur d'image.

Lorsque j'inspecte l'élément avec Chrome Dev Tools, je vois:

entrez la description de l'image ici

Les outils de développement ne fournissent pas d'informations sur l'élément d'espace réservé lors de l'inspection de l'élément d'entrée. Y a-t-il un autre moyen?

html css Sean Anderson
la source
doublon possible de Comment changer la couleur de l'espace réservé sur le focus?
cport1
17
Non ... Je déclare clairement dans la question que je sais comment le changer, mais que je me demande comment inspecter les propriétés d'une autre personne. Je fournis même un exemple de code montrant que je sais comment le changer.
Sean Anderson
quel est le site web? Étant donné que l'espace réservé est un pseudo-élément, vous devriez toujours pouvoir voir les styles lors de l'inspection de cet élément.
cport1

Réponses:

458

Je l'ai compris.

L'astuce consiste à activer «Afficher le DOM fantôme de l'agent utilisateur» dans le panneau Paramètres des outils de développement Chrome:

entrez la description de l'image ici

Pour accéder aux paramètres, cliquez sur le bouton "⋮" en haut à droite de votre panneau Dev Tools, puis cliquez sur Paramètres, et c'est sous l'onglet Préférences par défaut.

Avec cela, vous pouvez maintenant le voir:

entrez la description de l'image ici

Sean Anderson
la source
5
Le cadre est là en 62 et ça marche à merveille.
isherwood
Chrome 67 et votre solution s'appliquent également
gefrag
@gefrag J'utilise également Chrome 67, mais je ne trouve pas cette option. Pouvez-vous s'il vous plaît dans quel onglet il se trouve maintenant?
Ben Carp
Quelqu'un sait comment voir le ::placeholderpseudo-élément qui est largement pris en charge maintenant?
swrobel
2
@swrobel le workflow mentionné dans cette réponse vous permet d'inspecter ::placeholder. Voir cette réponse connexe .
Kayce Basques
33
  1. Pour Google Chrome version 69:
  2. Ouvrez Inspect Elements: Sur Mac ⌘ + Maj + C, sur Windows / Linux Ctrl + Maj + C OU F12.
  3. Cliquez sur le bouton "⋮" en haut à droite puis allez dans les paramètres
  4. Dans les paramètres, cliquez sur Préférences> Cliquez sur Afficher l'agent utilisateur Shadow DOM

Les images ci-dessous montrent le processus:

Accédez aux paramètres> Préférences:
Accédez aux paramètres> Préférences

Cliquez sur Afficher l'agent utilisateur Shadow DOM:
entrez la description de l'image ici

Afficher le CSS de l'espace réservé:
entrez la description de l'image ici

Jay Supeda
la source