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

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

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

@swrobel alur kerja yang disebutkan dalam jawaban ini memungkinkan Anda memeriksa ::placeholder. Lihat jawaban terkait ini .

— Kayce Basques

Untuk Google Chrome Versi 69:
Buka Elemen Inspeksi: Pada Mac ⌘ + Shift + C, di Windows / Linux Ctrl + Shift + C ATAU F12.
Klik tombol "⋮" di kanan atas kemudian Pergi ke pengaturan
Dalam pengaturan, klik Preferensi> Klik pada Tampilkan agen pengguna Shadow DOM

Gambar di bawah ini menunjukkan proses:

Buka pengaturan> Preferensi:

Klik pada Tampilkan agen pengguna Shadow DOM:

Lihat CSS placeholder:

— Jay Supeda
sumber