::placeholderSözde eleman (veya sözde sınıfı, bazı durumlarda, tarayıcı uygulamasına bağlı olarak) Eğer bir form öğesinin tutucu metni stil verir. İçinde olduğu gibi, metin placeholderözniteliğiyle ayarlandı :
Sağlayıcı önekli seçicilerin bu dağınıklığı ile çoğu tarayıcıda bu metne stil uygulayabilirsiniz:
::-webkit-input-placeholder ( /* Chrome/Opera/Safari */ color: pink; ) ::-moz-placeholder ( /* Firefox 19+ */ color: pink; ) :-ms-input-placeholder ( /* IE 10+ */ color: pink; ) :-moz-placeholder ( /* Firefox 18- */ color: pink; )Önemli uyarı: Bu sözdizimi standart değildir, dolayısıyla tüm adlandırma çılgınlığıdır. Spesifikasyonda hiç görünmüyor. :placeholder-shownstandarttır ve spesifikasyon yazarları bile ::placeholderstandartlaştırılmış versiyon olacağını düşünüyor gibi görünüyor .
Herhangi bir psuedo gibi, onu da gerektiği gibi belirli unsurlara göre kapsam altına alabilirsiniz, örneğin:
input(type="email").big-dog::-webkit-input-placeholder ( color: orange; )Demo
Arasındaki fark :placeholder-shownve::placeholder
:placeholder-shownyer tutucu metin gösterilirken girdinin kendisini seçmek içindir. Yer ::placeholdertutucu metnin hangi stillere sahip olduğunun aksine .
İşte bir şema:
Bunu oldukça kafa karıştırıcı buldum:
- özellikler sadece var
:placeholder-shownve yok::placeholder :placeholder-shownbir ana öğe olduğundan (örneğin yazı tipi boyutu) yer tutucu metnin stilini yine de etkileyebilir.
Bunun :placeholder-shownsözde bir sınıf (belirli bir durumdaki bir öğedir) ve ::placeholdersözde bir öğe (gerçekte DOM'da olmayan görünür bir şey) olduğunu unutmayın. Tek ve çift iki nokta üst üste ile ayırt edilebilir.
Tab Atkins bunu benim için e-posta yoluyla açıkladı:
: yer tutucunun gösterdiği, sözde bir sınıf olması, mevcut bir öğeyi seçmesi gerekir - yer tutucu gösterme durumunda olduğunuzda girişi seçer. :: yer tutucu sözde öğe, gerçek yer tutucu metnini sarar.
Eleman mı, sınıf mı?
Bu işlevsellik standartlaştırılmamıştır. Bu, her tarayıcının nasıl çalışması gerektiği konusunda farklı bir fikri olduğu anlamına gelir.
Firefox bunu başlangıçta sözde bir sınıf olarak uyguladı, ancak birçok nedenden dolayı değiştirdi. Uzun lafın kısası, sözde bir sınıfla aynı şeyi yapamazsınız.
Örneğin, giriş odaklandığında metnin rengini değiştirmek istiyorsanız. input:focus::placeholderSözde bir sınıfla yapamayacağınız gibi bir seçici kullanırsınız (aynı şekilde istiflenmezler).
IE10, bunu bir öğe yerine sözde bir sınıf olarak destekler. Diğer herkes sözde bir öğe uyguladı.
Firefox yer tutucu rengi
Firefox'ta yer tutucunun renginin diğer tarayıcılarla karşılaştırıldığında nasıl soluk göründüğünü fark edebilirsiniz. Aşağıdaki resimde, Firefox 43 solda, Chrome 47 ise sağda gösterilmektedir:
Bunun nedeni, varsayılan olarak Firefox'taki tüm yer tutucuların kendilerine uygulanan bir opaklık değerine sahip olmasıdır, bu nedenle bunu düzeltmek için bu değeri sıfırlamamız gerekir:
::-moz-placeholder ( opacity: 1; )Bu demoyu Firefox'ta test ederek daha fazlasını görebilirsiniz.
Desteklenen Stiller
Sözde öğe, bu özelliklerin stilini destekler:
fontözelliklericolorbackgroundözellikleriword-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heighttext-indentopacity
Sözde sınıf bu özelliklerin çoğunu (hepsini değilse de) destekler, ancak yukarıda özetlenen nedenlerden dolayı esnek değildir.
Tarayıcı desteği
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
| Krom | Firefox | IE | Kenar | Safari |
|---|---|---|---|---|
| 57 | 19 * | Hayır | 79 | 10.1 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 10.3 |
İlgili özellikler
Almanak 22 Mayıs 2020: yer tutucu gösteriliyor
input:placeholder-shown ( border: 5px solid red; ) 
Geoff Graham