開発者ツールで webkit-input-placeholder を検査する 質問する

開発者ツールで webkit-input-placeholder を検査する 質問する

テキスト入力のプレースホルダーを次のようにスタイル設定することができます。

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

オンラインでウェブサイトを見ているのですが、そのウェブサイトと同じプレースホルダーカラーを使いたいです。そのウェブサイトで使用されている色を調べることはできますか? アルファ値も含めたいので、画像エディタで色をサンプリングするだけではだめです。

Chrome Dev Tools で要素を検査すると、次のように表示されます。

ここに画像の説明を入力してください

開発ツールは、入力要素を検査するときにプレースホルダー要素に関する情報を提供しません。別の方法はありますか?

ベストアンサー1

私はそれを考え出した。

コツは、Chrome デベロッパー ツールの設定パネルで「ユーザー エージェントの Shadow DOM を表示」を有効にすることです。

ここに画像の説明を入力してください

設定にアクセスするには、開発ツール パネルの右上にある歯車アイコンをクリックし、左側の [設定] タブが選択されていることを確認し、[要素] の見出しを見つけて、その見出しの下にある [ユーザー エージェントのシャドウ DOM を表示する] チェックボックスをオンにします。

これで、次のように表示されます。

ここに画像の説明を入力してください

おすすめ記事