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.
- Y, Blink (Safari, Google Chrome, Opera 15 ) ve Microsoft Kenar pseudo-element kullanıyor:
::-webkit-input-placeholder. - Mozilla Firefox 4 için 18 pseudo-class kullanıyor:
:-moz-placeholder(birkolon). - Mozilla Firefox 19 pseudo-element kullanıyor:
::-moz-placeholderama eski seçici hala bir süre için çalışacak. - Internet Explorer 10 ve 11 pseudo-sınıfı kullanıyorsunuz:
:-ms-input-placeholder.
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: 1burada 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
placeholderHTML desteği ile ama tarayıcılar (Opera gibi) de test edilmelidir. - Bazı tarayıcılar
inputbazı türleri (, *email*19)ek varsayılan CSS kullanın. Bu beklenmedik bir şekilde işleme etkileyebilir. properties-webkit-appearanceve-moz-appearancebunu değiştirmek için kullanın. Örnek:
[type="search"] {
-moz-appearance: textfield;
-webkit-appearance: textfield;
appearance: textfield;
}
Bunu PaylaÅŸ:
AYNI ETÄ°KETTEKÄ° VÄ°DEOLAR
YORUMLAR
SPONSOR VÄ°DEO
Rastgele Yazarlar
-
Electro PosÃ
21 ÅžUBAT 2013 -
iZAPPA
16 Temmuz 2010 -
Makeup Lover
12 HAZÄ°RAN 2011
Değişim renk ve görünüş damla aşağı ok...
HTML5 tutucu css doldurma...
HTML5 numarasını giriş spin kutusu sak...
Bir çok satırlı HTML5 tutucu metin&; b...
Neden giriş tipi datetime HTML5 tarayı...