Search code examples
htmlcsstextfieldplaceholder

Styling input placeholder CSS within dev tools

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.

Solution

  • It is possible in Chrome, Edge, Opera and Firefox.

    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". In Edge and Opera it's under Settings > Preferences > Elements > Show user agent shadow DOM.

    Chrome Settings

    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:

    enter image description here

    In Firefox, the style is shown by default in the Inspector tab, under "Pseudo-elements" (::placeholder).