Inspeccionar webkit-input-placeholder con herramientas de desarrollador
Es posible aplicar estilo al marcador de posición de una entrada de texto con lo siguiente:
-webkit-input-placeholder {
color: red;
}
Estoy viendo un sitio web en línea y me gustaría utilizar el mismo color de marcador de posición que ellos. ¿Es posible saber qué color usaron? Me gustaría incluir valores alfa, por lo que no puedo simplemente probar el color con un editor de imágenes.
Cuando inspecciono el elemento con Chrome Dev Tools, veo:
Las herramientas de desarrollo no proporcionan información sobre el elemento marcador de posición al inspeccionar el elemento de entrada. ¿Hay otra manera?
Me lo imaginé.
El truco consiste en habilitar 'Mostrar DOM oculto del agente de usuario' en el panel de Configuración de las Herramientas para desarrolladores de Chrome:
Para acceder a la configuración, haga clic en el ícono de ajustes en la parte superior derecha de su panel de Herramientas de desarrollo, luego asegúrese de que la pestaña Preferencias en el lado izquierdo esté seleccionada, busque el encabezado Elementos y marque la casilla de verificación "Mostrar DOM oculto del agente de usuario" debajo de eso. título.
Con eso, ahora puedes verlo:
- Para Google Chrome versión 69:
- Abra Inspeccionar elementos: en Mac ⌘ + Shift + C, en Windows/Linux Ctrl + Shift + C O F12.
- Haga clic en el botón "⋮" en la parte superior derecha y luego vaya a configuración
- En configuración, haga clic en Preferencias > Haga clic en Mostrar agente de usuario Shadow DOM
Las siguientes imágenes muestran el proceso:
Vaya a configuración > Preferencias:
Haga clic en Mostrar agente de usuario Shadow DOM:
Ver el CSS del marcador de posición:
