11

I want to test my placeholder style in chrome devtools but can't find it.

I tried to use the "Toggle Element State" but it provides only

  1. :hover
  2. :active
  3. :focus-within
  4. :focus
  5. :visited

These are my css lines:

    .inputs-wrapper input[type="text"]::placeholder ,
    .inputs-wrapper input[type="tel"]::placeholder{

        font-weight:900;
        color:black;

    }

html:

<div class="inputs-wrapper">
    <input type="text" placeholder="שם מלא"/>
    <input type="tel" placeholder="טלפון"/>
    <input type="submit" value="המשך > " />
</div>
Zohar Revivo
  • 485
  • 1
  • 7
  • 18
  • `placeholder` is not a state like hover, its the help text in a input, when you click on it the placeholder is removed and you can write on it, so to "see" the style you just need to look to the input !! – João Deroldo Jan 09 '19 at 10:18
  • I "stand" on the input element and yet don't see any style properties of its placeholder in the style section and that is what I am looking for. – Zohar Revivo Jan 09 '19 at 10:23
  • 2
    oh i got it now sorry, so this may help you https://stackoverflow.com/questions/26852922/inspect-webkit-input-placeholder-with-developer-tools – João Deroldo Jan 09 '19 at 10:28

1 Answers1

28

Showing user agent Shadow DOM does the trick.

After enabling this setting, expand the #shadow-root section. The placeholder shows up as a div.

demo

Kayce Basques
  • 23,849
  • 11
  • 86
  • 120