Inspeccione webkit-input-placeholder con herramientas de desarrollador

225

Es posible diseñar un marcador de posición de entrada de texto con lo siguiente:

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

Estoy viendo un sitio web en línea y me gustaría usar el mismo color de marcador de posición que ellos. ¿Es posible averiguar qué color usaron? Me gustaría incluir cualquier valor alfa, por lo que no puedo simplemente muestrear el color con un editor de imágenes.

Cuando inspecciono el elemento con Chrome Dev Tools, veo:

ingrese la descripción de la imagen aquí

Las herramientas de desarrollo no proporcionan información sobre el elemento de marcador de posición cuando se inspecciona el elemento de entrada. ¿Hay otra manera?

Sean Anderson
fuente
17
No ... Afirmo claramente en la pregunta que soy consciente de cómo cambiarlo, pero que me pregunto cómo inspeccionar las propiedades de otra persona. Incluso proporciono un ejemplo de código que muestra que sé cómo cambiarlo.
Sean Anderson
¿Cuál es el sitio web? Dado que el marcador de posición es un pseudo-elemento, aún debería poder ver los estilos al inspeccionar ese elemento.
cport1

Respuestas:

458

Me lo imaginé.

El truco consiste en habilitar 'Mostrar DOM de agente de usuario de sombra' en el panel de Configuración de Chrome Developer Tools:

ingrese la descripción de la imagen aquí

Para acceder a la configuración, haga clic en el botón "⋮" en la parte superior derecha de su panel de Herramientas de desarrollo, luego haga clic en Configuración y se encuentra debajo de la pestaña Preferencias predeterminada.

Con eso, ahora puedes verlo:

ingrese la descripción de la imagen aquí

Sean Anderson
fuente
55
El escenario está allí en 62 y funciona de maravilla.
isherwood
Chrome 67 y su solución también se aplica
gefrag
@gefrag También uso Chrome 67, pero no puedo encontrar esta opción. ¿Puedes por favor en qué pestaña se encuentra ahora?
Ben Carp
¿Alguien sabe cómo ver el ::placeholderpseudo-elemento ampliamente admitido ahora?
swrobel
2
@swrobel el flujo de trabajo mencionado en esta respuesta le permite inspeccionar ::placeholder. Ver esta respuesta relacionada .
Kayce Basques
33
  1. Para Google Chrome versión 69:
  2. Abra Inspeccionar elementos: en Mac ⌘ + Shift + C, en Windows / Linux Ctrl + Shift + C O F12.
  3. Haga clic en el botón "⋮" en la esquina superior derecha y luego vaya a configuración
  4. En la 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:
Vaya a configuración> Preferencias

Haga clic en Mostrar agente de usuario Shadow DOM:
ingrese la descripción de la imagen aquí

Ver el CSS del marcador de posición:
ingrese la descripción de la imagen aquí

Jay Supeda
fuente