SORU
9 NİSAN 2010, Cuma


Değişim bir giriş'ile renk HTML5 tutucu s CSS

Krom input[type=text] elementler (Diğerleri muhtemelen de öyle) placeholder attribute destekler.

Ama aşağıdaki CSS zerre kadar yer tutucunun değeri için squat yapmaz:

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}
<input type="text" placeholder="Value">

Value hala kırmızı yerine gri kalır.

Bir şekilde yer tutucu metnin rengini değiştirmek için var mı?

Zaten tutucu desteklemeyen tarayıcılar özgün öznitelik için yer tutucu jQuery eklentisi kullanıyorum.

CEVAP
9 NİSAN 2010, Cuma


Uygulama

Üç farklı uygulama vardır: sözde elemanlar, pseudo-sınıfları ve hiçbir şey.

Internet Explorer 9 ve daha düşük placeholder nitelik, Opera 12 iken desteklemiyor ve alt tutucular için herhangi bir CSS seçici desteklemez.

En iyi uygulama şekli hakkında tartışma hala devam ediyor. Shadow DOM gerçek unsurlar gibi pseudo-elements hareket unutmayın. input padding sahte bir öğe olarak aynı arka plan rengini alacak.

CSS seçiciler

Kullanıcı arayüzleri bilinmeyen bir seçici bir kuralı göz ardı etmeleri gerekmektedir. Selectors Level 3 bkz

seçiciler geçersiz bir seçici içeren group geçersiz.

Her tarayıcı için ayrı kurallara ihtiyacımız var. Aksi halde tüm grup tüm tarayıcılar tarafından dikkate alınmaz.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19  */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
<input placeholder="Stack Snippets are awesome!">

Kullanım notları

  • Kötü karşıtlıkları önlemek için dikkatli olun. Firefox'un tutucu düşük bir donukluk varsaymak gibi görünüyor, bu yüzden opacity: 1 burada kullanmak gerekiyor.
  • Yer tutucu metin sadece eğer – giriş em öğeleri sığacak şekilde ve büyük minimum yazı tipi boyutu ayarları ile onları test değil mi kesiliyor unutmayın. Çeviriler unutma: bazı dillerde aynı sözcük için need more room.
  • Bunun için CSS desteği olmadan placeholder HTML desteği ile ama tarayıcılar (Opera gibi) de test edilmelidir.
  • Bazı tarayıcılar input bazı türleri (, *email*19)ek varsayılan CSS kullanın. Bu beklenmedik bir şekilde işleme etkileyebilir. properties -webkit-appearance ve -moz-appearance bunu değiştirmek için kullanın. Örnek:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Fraser Raft

    Fraser Raft

    9 Mart 2010
  • Ludique

    Ludique

    21 NİSAN 2009
  • michaeljacksonVEVO

    michaeljacks

    2 EYLÜL 2009

İLGİLİ SORU / CEVAPLAR