Comment déterminer la couleur exacte de l'espace réservé dans les outils de développement Chrome ?

Inspection des couleurs d'espace réservé dans WebKit

Il est de notoriété publique que le texte d'espace réservé dans les entrées de texte peut être stylisé à l'aide du CSS -webkit-input-placeholder propriété. Cependant, déterminer la couleur exacte utilisée par un site Web peut s'avérer difficile lorsque vous utilisez un éditeur d'images conventionnel.

Pour surmonter ce problème, Chrome Dev Tools propose une solution :

Étape 1 : Activer "Afficher le DOM fantôme de l'agent utilisateur"

En activant cette option dans les paramètres des outils de développement Chrome (Préférences > Éléments > "Afficher le DOM fantôme de l'agent utilisateur"), vous pourrez inspecter l'espace réservé éléments indirectement via le DOM fantôme.

Étape 2 : Localisez l'élément d'espace réservé

Une fois activé, vous pouvez inspecter l'élément d'entrée et localiser l'élément d'espace réservé dans son DOM fantôme. . Cela peut être identifié par des styles tels que -webkit-input-placeholder.

Étape 3 : Déterminer la couleur de l'espace réservé

Une fois l'élément d'espace réservé sélectionné, vous pouvez maintenant voir son styles calculés, y compris la couleur de l'espace réservé. Cela inclut toutes les valeurs alpha, fournissant une représentation spécifique et précise de la couleur utilisée.

Conclusion :

En comprenant comment Chrome Dev Tools gère le Shadow DOM, vous pouvez efficacement inspectez les éléments d'espace réservé et récupérez des informations de couleur spécifiques, quelle que soit la manière dont elles sont appliquées au site Web.

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!