Wednesday, 1 February 2017

html - Inspect webkit-input-placeholder with developer tools



It's possible to style a text input's placeholder with the following:



-webkit-input-placeholder {
color: red;
}



I am looking at a website online and I would like to use the same placeholder color as they do. Is it possible to figure out what color they used? I would like to include any alpha values, so I can't just sample the color with an image editor.



When I inspect the element with Chrome Dev Tools, I see:



enter image description here



Dev tools does not provide information regarding the placeholder element when inspecting the input element. Is there another way?


Answer



I figured it out.




The trick is to enable 'Show user agent shadow DOM' in the Settings panel of Chrome Developer Tools:



enter image description here



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:



enter image description here


No comments:

Post a Comment

c++ - Does curly brackets matter for empty constructor?

Those brackets declare an empty, inline constructor. In that case, with them, the constructor does exist, it merely does nothing more than t...