Menu
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.
:-ms-input-placeholderThe placeholder text is displayed with the specified style until the field has focus, meaning that the field can be typed into. When the field has focus, it returns to the normal style of the input field and the placeholder text disappears.
I figured it out.
The trick is to enable 'Show user agent shadow DOM' in the Settings panel of Chrome Developer Tools:
To get to settings, click the "⋮" button at the top right of your Dev Tools panel, then click Settings, and it's under the default Preferences tab.
With that, you can now see it:
The below images show the process:
Go to settings > Preferences:
Click on Show user agent Shadow DOM:
View the CSS of placeholder:
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