: yer tutucu gösterilen - CSS Hileleri

Anonim

:placeholder-shownSözde sınıf seçer giriş elemanının kendisi tutucu metin bir form girişi var olduğunda. Bunu şu anda yer tutucu metin gösteren girdilerle göstermeyen girdiler arasında ayrım yapmanın güzel bir yolu olarak düşünün.

input:placeholder-shown ( border: 5px solid red; )

Yer tutucuların arkasındaki fikir

Metin tabanlı e - postalar ve girişte yer tutucu metin olabilir. Olası bir değeri önermek için giriş boş olduğunda gösterilen metindir. Örneğin, bir okulu isteyen bir formda ne istediğine dair bir etiket olabilir, ancak daha sonra örnek değer olarak yer tutucudaki "Forest Hills Örnek Lisesi" ni önerebilirsiniz:

School Name:

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:

  1. özellikler sadece var :placeholder-shownve yok::placeholder
  2. :placeholder-shown bir 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 durumda olan 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ı:

:placeholder-shownsözde sınıf olmak, mevcut bir elemanı seçmek zorundadır. Yer tutucu gösterme durumunda olduğunuzda girişi seçer. ::placeholderSözde eleman asıl tutucu metin kaydırılır.

Yer tutucu metnin stilini belirlemeniz gerekiyorsa

::placeholder Burada Almanak'ta ayrıntılandırdığımız (aslında bunun için tüm çılgın satıcı öneklerini kullanın) kullanın .

Daha fazla bilgi

  • Seçiciler Seviye 4 Teknik Özellikler

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
47 51 11 * 79 9

Mobil / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 9.0-9.2