在Google Chrome开发者工具中查找占位符伪样式 [英] Find placeholder pseudo style in google chrome devtools

问题描述

我想在chrome devtools中测试我的占位符样式，但找不到.

I want to test my placeholder style in chrome devtools but can't find it.

我尝试使用切换元素状态"，但仅提供

I tried to use the "Toggle Element State" but it provides only

1. :悬停
2. :活动
3. :聚焦于内部
4. :focus
5. :已访问

这些是我的css行:

    .inputs-wrapper input[type="text"]::placeholder ,
    .inputs-wrapper input[type="tel"]::placeholder{

        font-weight:900;
        color:black;

    }

html:

<div class="inputs-wrapper">
    <input type="text" placeholder="שם מלא"/>
    <input type="tel" placeholder="טלפון"/>
    <input type="submit" value="המשך > " />
</div>

推荐答案

显示用户代理Shadow DOM 可以解决问题.

启用此设置后，展开#shadow-root部分.占位符显示为div.

After enabling this setting, expand the #shadow-root section. The placeholder shows up as a div.

这篇关于在Google Chrome开发者工具中查找占位符伪样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！