Menu
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
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>
503
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.
For Google Chrome Version 69: Open Inspect Elements: On Mac ⌘ + Shift + C, on Windows / Linux Ctrl + Shift + C OR F12.
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.
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.
Showing user agent Shadow DOM does the trick.
After enabling this setting, expand the #shadow-root section. The placeholder shows up as a div.
184
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
