Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Find placeholder pseudo style in google chrome devtools

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>
like image 503
Zohar Revivo Avatar asked Jan 09 '19 10:01

Zohar Revivo


People also ask

How do I inspect a placeholder style in Chrome?

Check the "Show user agent shadow DOM" checkbox and reload your page. You should now see the placeholder html output in your dev tools when you view the elements tab. Clicking on the placeholder html will bring up the applied styles for you to view or edit.

How do you inspect placeholder text?

For Google Chrome Version 69: Open Inspect Elements: On Mac ⌘ + Shift + C, on Windows / Linux Ctrl + Shift + C OR F12.

Where can I find CSS in Devtools?

Click on the three vertical dots located on the top-right of Chrome dev tools. Select "More Tools" from the drop-down menu. You'll discover a variety of options when you click "More Tools." From the various options, select the CSS overview feature.

How do you reference a placeholder in CSS?

CSS ::placeholder SelectorThe ::placeholder selector selects form elements with placeholder text, and let you style the placeholder text. The placeholder text is set with the placeholder attribute, which specifies a hint that describes the expected value of an input field.


1 Answers

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

like image 184
Kayce Basques Avatar answered Sep 28 '22 06:09

Kayce Basques