342

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?

sbolel
  • 3,486
  • 28
  • 45
Sean Anderson
  • 27,963
  • 30
  • 126
  • 237
  • possible duplicate of [How to change placeholder color on focus?](http://stackoverflow.com/questions/13183421/how-to-change-placeholder-color-on-focus) – cport1 Nov 10 '14 at 21:13
  • 26
    No... I clearly state in the question that I am aware of how to change it, but that I am wondering how to inspect the properties of another person's. I even provide a code sample showing I know how to change it. – Sean Anderson Nov 10 '14 at 21:15
  • what's the website? Since placeholder is a pseudo-element, you should still be able to see the styles when inspecting that element. – cport1 Nov 10 '14 at 21:26

2 Answers2

695

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

yurylavrukhin
  • 42
  • 1
  • 6
Sean Anderson
  • 27,963
  • 30
  • 126
  • 237
  • 7
    The setting is there in 62 and it works beautifully. – isherwood Nov 28 '17 at 17:18
  • Chrome 67 and your solution applies as well – gefrag Jun 19 '18 at 08:33
  • @gefrag I use Chrome 67 as well, but can't find this option. Can u please in which tab it is located now? – Ben Carp Jun 24 '18 at 14:42
  • Anyone know how to see the `::placeholder` pseudo-element that's broadly supported now? – swrobel Sep 13 '18 at 14:10
  • 2
    @swrobel the workflow mentioned in this answer lets you inspect `::placeholder`. See this [related answer](https://stackoverflow.com/a/54155309/1669860). – Kayce Basques Jan 11 '19 at 23:20
  • 1
    In case you can't find the 'Settings' menu item under the"⋮" button, there's a cogwheel ⚙️ just to the left of it :) – Nadav May 13 '21 at 08:25
  • 4
    It has moved to **Settings** > **Preferences** > **Elements** > [_] Show user agent shadow DOM – user9645 Aug 06 '21 at 16:56
  • Why isn't it enabled in Chrome by default? – Ben Carp Oct 14 '21 at 13:34
  • After Settings > Preferences > Elements is checked, I found to display the -webkit properties it was required to drill down in the Elements window before all the pseudo elements were exposed along with their properties in the styles pane. Thank you for this post, very helpful! – Harvey Mushman Mar 15 '22 at 16:42
75
  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

Jan Doggen
  • 8,799
  • 13
  • 70
  • 144
Jay Supeda
  • 919
  • 7
  • 5
  • 1
    Thanks! I was looking in Chrome settings I couldn't find it. Apparently, it is in the Dev Tools Settings. – esengineer Oct 18 '21 at 12:44