Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
755 views
in Technique[技术] by (71.8m points)

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...