Webkit-input-placeholder'ı geliştirici araçlarıyla inceleyin

225

Bir metin girişinin yer tutucusunu aşağıdakilerle biçimlendirmek mümkündür:

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

İnternette bir web sitesine bakıyorum ve onların da aynı yer tutucu rengini kullanmak istiyorum. Hangi rengi kullandıklarını anlamak mümkün mü? Herhangi bir alfa değeri eklemek istiyorum, bu yüzden sadece bir görüntü düzenleyicisiyle rengi örnekleyemiyorum.

Öğeyi Chrome Geliştirme Araçları ile incelediğimde şunu görüyorum:

resim açıklamasını buraya girin

Geliştirici araçları, giriş öğesini incelerken yer tutucu öğeyle ilgili bilgi sağlamaz. Başka bir yol var mı?

html css

— Sean Anderson
kaynak

olası yinelenen odakta yer tutucu rengini değiştirmek için nasıl?

— cport1

Hayır ... Sorunun nasıl değiştirileceğinin farkında olduğumu açıkça belirtiyorum, ancak başka bir kişinin özelliklerini nasıl inceleyeceğimi merak ediyorum. Hatta nasıl değiştireceğini bildiğim gösteren bir kod örneği sağlar.

— Sean Anderson

web sitesi nedir Yer tutucu sözde bir öğe olduğundan, yine de o öğeyi incelerken stilleri görebilmeniz gerekir.

— cport1

Yanıtlar:

458

Bunu anladım.

İşin püf noktası, Chrome Geliştirici Araçları'nın Ayarlar panelinde 'Kullanıcı aracısı gölge DOM'sini göster' seçeneğini etkinleştirmektir:

resim açıklamasını buraya girin

Ayarlara ulaşmak için Geliştirici Araçları panelinizin sağ üst kısmındaki "⋮" düğmesini tıklayın, ardından Ayarlar'ı tıklayın ve varsayılan Tercihler sekmesinin altındadır.

Bununla şimdi görebilirsiniz:

resim açıklamasını buraya girin

— Sean Anderson
kaynak

62 Orada bir ayardır ve güzel çalışıyor.

— Isherwood

Chrome 67 ve çözümünüz de geçerlidir

— gefrag

@gefrag Chrome 67'yi de kullanıyorum, ancak bu seçeneği bulamıyorum. Şimdi hangi sekmede yer aldığını lütfen?

— Ben Carp

Herkes ::placeholderşu anda yaygın olarak desteklenen sözde elemanı nasıl göreceğini biliyor mu?

— swrobel

@swrobel bu cevapta belirtilen iş akışını incelemenizi sağlar ::placeholder. Bu ilgili cevaba bakınız .

— Kayce Basques

Google Chrome Sürüm 69 için:
Denetleme Elemanlarını Aç: Mac ⌘ + Üst Karakter + C'de, Windows / Linux Ctrl + Üst Karakter + C VEYA F12'de.
Sağ üstteki "⋮" düğmesini ve ardından Ayarlara git'i tıklayın.
Ayarlarda Tercihler> Kullanıcı aracısını göster Shadow DOM'u tıklayın

Aşağıdaki resimler işlemi göstermektedir:

Ayarlar> Tercihler'e gidin:

Kullanıcı aracısını göster Gölge DOM'yi tıklayın:

Yer tutucunun CSS'sini görüntüleyin:

— Jay Supeda
kaynak