Comment inspecter les couleurs des espaces réservés d'entrée du Webkit à l'aide de Chrome DevTools ?

Inspection des couleurs des espaces réservés d'entrée du Webkit

Il est courant de personnaliser le texte des espaces réservés sur les formulaires Web à l'aide de CSS, souvent pour correspondre à l'image de marque du site Web ou pour améliorer l'expérience utilisateur. Parfois, il devient nécessaire d'inspecter les couleurs d'espace réservé utilisées sur d'autres sites Web pour obtenir une apparence cohérente.

L'utilisation de Chrome DevTools pour inspecter des éléments ne fournit généralement pas d'informations spécifiques à l'élément d'espace réservé. Cependant, il existe un moyen de surmonter cette limitation.

L'astuce consiste à activer l'option "Afficher le DOM fantôme de l'agent utilisateur" dans Chrome DevTools. Ce paramètre vous permet d'afficher les éléments qui sont généralement masqués dans l'arborescence DOM.

Instructions :

1. Ouvrez le panneau d'inspection des éléments dans Chrome DevTools.
2. Cliquez sur l'icône d'engrenage en haut à droite du panneau pour ouvrir les paramètres.
3. Sélectionnez l'onglet "Préférences".
4. Sous la rubrique "Éléments", cochez la case "Afficher case à cocher "::-webkit-placeholder" de l'agent utilisateur shadow DOM".

Une fois cette option activée, vous pourrez développer le shadow DOM de l'élément d'entrée et voir l'élément "::-webkit-placeholder". Cet élément contient les styles appliqués au texte de l'espace réservé, y compris la couleur. En inspectant cet élément, vous pouvez obtenir la valeur de couleur exacte, y compris toutes les valeurs alpha.

Cette solution de contournement vous permet de déterminer facilement la couleur de l'espace réservé utilisé sur n'importe quel site Web, vous permettant ainsi de la faire correspondre à votre propre conception ou pour à des fins de référence.

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!