Menu
I know how to style the CSS of placeholder text/background/font-size etc across browsers with each browser's specified pseudo classes. However I cannot style them within the browser with dev tools and have not found an answer to whether this is even possible.
I'd love to work with placeholder styles without a trial and error workflow.
348
Use the ::placeholder pseudo-element to style your placeholder text in an <input> or <textarea> form element. Most modern browsers support this, but for older browsers, vendor prefixes will be required.
In most of the browsers, placeholder texts are usually aligned in left. The selector uses text-align property to set the text alignment in the placeholder.
Only the subset of CSS properties that apply to the ::first-line pseudo-element can be used in a rule using ::placeholder in its selector. Note: In most browsers, the appearance of placeholder text is a translucent or light gray color by default.
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.
It is possible in Chrome.
Go to the Dev Tools Settings (the gear icon in the top right) and under General|Elements turn on "Show user agent shadow DOM".
Now go inspect your text box. There should now be an arrow next to the input element.
Expand that and select <div psuedo="-webkit-input-placeholder" id="placeholder" style="visibility: visible; text-overflow: clip;">.
Your classes that you are using to modify the placeholder should show up in the style pane.
Here is what it should look like:
66
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
