Inspect webkit-input-placeholder with developer tools

HtmlCss

Html Problem Overview

It's possible to style a text input's placeholder with the following:

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

I am looking at a website online and I would like to use the same placeholder color as they do. Is it possible to figure out what color they used? I would like to include any alpha values, so I can't just sample the color with an image editor.

When I inspect the element with Chrome Dev Tools, I see:

enter image description here

Dev tools does not provide information regarding the placeholder element when inspecting the input element. Is there another way?

Html Solutions

Solution 1 - Html

I figured it out.

The trick is to enable 'Show user agent shadow DOM' in the Settings panel of Chrome Developer Tools:

enter image description here

To get to settings, click the Gear icon at the top right of your Dev Tools panel, then make sure Preferences tab on the left-hand side is selected, find the Elements heading, and check "Show user agent shadow DOM" checkbox below that heading.

With that, you can now see it:

enter image description here

Solution 2 - Html

  1. For Google Chrome Version 69:
  2. Open Inspect Elements: On Mac ⌘ + Shift + C, on Windows / Linux Ctrl + Shift + C OR F12.
  3. Click the "⋮" button at the top right then Go to settings
  4. In settings click on Preferences > Click on Show user agent Shadow DOM

The below images show the process:

Go to settings > Preferences:
Go to settings > Preferences

Click on Show user agent Shadow DOM:
enter image description here

View the CSS of placeholder:
enter image description here

Categories
Recommended Html Solutions
Recommended Css Solutions

Previous Solution:

ImportError: No module named 'Tkinter'

PythonTkinter

Next Solution:

Android: remove left margin from actionbar's custom layout

AndroidXmlAndroid Actionbar-Compat

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSean AndersonView Question on Stackoverflow
Solution 1 - HtmlSean AndersonView Answer on Stackoverflow
Solution 2 - HtmlJay SupedaView Answer on Stackoverflow