Periksa webkit-input-placeholder dengan alat pengembang

225

Dimungkinkan untuk merancang placeholder input teks dengan yang berikut:

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

Saya melihat situs web online dan saya ingin menggunakan warna placeholder yang sama seperti mereka. Apakah mungkin untuk mengetahui warna apa yang mereka gunakan? Saya ingin memasukkan nilai alfa apa pun, jadi saya tidak bisa hanya mencicipi warna dengan editor gambar.

Ketika saya memeriksa elemen dengan Alat Dev Chrome, saya melihat:

masukkan deskripsi gambar di sini

Alat Dev tidak memberikan informasi mengenai elemen placeholder ketika memeriksa elemen input. Apakah ada cara lain?

html css Sean Anderson
sumber
kemungkinan duplikat Bagaimana cara mengubah warna placeholder pada fokus?
cport1
17
Tidak ... Saya dengan jelas menyatakan dalam pertanyaan bahwa saya sadar bagaimana mengubahnya, tetapi saya bertanya-tanya bagaimana cara memeriksa properti orang lain. Saya bahkan memberikan contoh kode yang menunjukkan bahwa saya tahu cara mengubahnya.
Sean Anderson
apa situs webnya? Karena placeholder adalah elemen pseudo, Anda harus tetap dapat melihat gaya saat memeriksa elemen itu.
cport1

Jawaban:

458

Saya menemukan jawabannya.

Caranya adalah dengan mengaktifkan 'Tampilkan bayangan agen pengguna DOM' di panel Pengaturan Alat Pengembang Chrome:

masukkan deskripsi gambar di sini

Untuk sampai ke pengaturan, klik tombol "⋮" di kanan atas panel Dev Tools Anda, lalu klik Pengaturan, dan itu di bawah tab Preferensi default.

Dengan itu, Anda sekarang dapat melihatnya:

masukkan deskripsi gambar di sini

Sean Anderson
sumber
5
Pengaturan ada di 62 dan bekerja dengan indah.
isherwood
Chrome 67 dan solusi Anda berlaku juga
gefrag
@gefrag Saya menggunakan Chrome 67 juga, tetapi tidak dapat menemukan opsi ini. Bisakah Anda tolong di tab mana itu berada sekarang?
Ben Carp
Adakah yang tahu cara melihat ::placeholderelemen semu yang didukung secara luas sekarang?
swrobel
2
@swrobel alur kerja yang disebutkan dalam jawaban ini memungkinkan Anda memeriksa ::placeholder. Lihat jawaban terkait ini .
Kayce Basques
33
  1. Untuk Google Chrome Versi 69:
  2. Buka Elemen Inspeksi: Pada Mac ⌘ + Shift + C, di Windows / Linux Ctrl + Shift + C ATAU F12.
  3. Klik tombol "⋮" di kanan atas kemudian Pergi ke pengaturan
  4. Dalam pengaturan, klik Preferensi> Klik pada Tampilkan agen pengguna Shadow DOM

Gambar di bawah ini menunjukkan proses:

Buka pengaturan> Preferensi:
Buka pengaturan> Preferensi

Klik pada Tampilkan agen pengguna Shadow DOM:
masukkan deskripsi gambar di sini

Lihat CSS placeholder:
masukkan deskripsi gambar di sini

Jay Supeda
sumber