Comment inspecter la couleur -webkit-input-placeholder dans les outils de développement Chrome ?

Inspection de Webkit-Input-Placeholder avec les outils de développement

Lorsque vous travaillez avec des éléments de saisie de texte, le style du texte d'espace réservé peut être obtenu à l'aide de - Propriété de style webkit-input-placeholder. Cependant, déterminer la couleur de l'espace réservé lors de l'inspection d'un site Web peut s'avérer difficile.

Limitations des outils de développement Chrome

Au départ, l'inspection d'un élément d'entrée avec les outils de développement Chrome ne parvient pas à fournir d'informations. à propos de son espace réservé. En effet, Dev Tools n'affiche pas les informations relatives au Shadow DOM.

Activation de « Afficher le DOM Shadow de l'agent utilisateur »

Pour surmonter cette limitation, une étape clé consiste à activez « Afficher le DOM fantôme de l'agent utilisateur » dans le panneau Paramètres des outils de développement Chrome. En cochant cette option, vous exposez le Shadow DOM précédemment masqué, qui contient l'élément placeholder.

Inspection de l'élément Placeholder

Après avoir activé la visibilité du Shadow DOM, actualisez le Dev L'inspecteur d'outils révélera l'élément d'espace réservé dans le DOM fantôme. Cet élément affiche désormais les informations de couleur souhaitées, y compris les éventuelles valeurs alpha.

En suivant ces étapes, les développeurs peuvent inspecter la couleur de l'espace réservé utilisée sur les sites Web et l'incorporer dans leurs propres conceptions.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!