Ortadaki öğelerin metnine benzeyen yer tutucular, nibi tarzında olabilir. Neyse ki, ne kadar renkli ve güvensiz olursanız olun, girişinizin yer tutucu metnine stil vermek için kısa ama etkili bir CSS çözümü sağladık. Kod için okumaya devam edin.
Yer tutucu metin rengini değiştirme
Basit bir girdi ve bazı yer tutucu metinlerle başlayalım, bu örnek için "arama" kelimesini kullanacağız, ancak istediğiniz herhangi bir şeyi kullanabilirsiniz. Temel HTML aşağıdadır:
HTML
Giriş (ve metin alanı) yer tutucu metni varsayılan olarak daha açık bir renge sahiptir, böylece bazı CSS satırlarıyla bunları değiştirebilirsiniz. Burada metni seçebilir, ad için HTML rengini veya çıktı yöntemi için herhangi bir rengi seçebiliriz (HEX, RGB, HSL).
css
::-webkit-input-placeholder ( /* Chrome */ color: red; ) :-ms-input-placeholder ( /* IE 10+ */ color: red; ) ::-moz-placeholder ( /* Firefox 19 + */ renk: kırmızı; opaklık: 1; ) :-moz-yer tutucu ( /* Firefox 4 - 18 */ renk: kırmızı; opaklık: 1; )Açıkçası, mümkün olduğunca tarayıcıları desteklemek için çeşitli güncelleme düzeltmeleri eklemek önemlidir.
Yer tutucu odak metin rengini değiştirme
Doğru, metnin renklerini başarıyla siyaha değiştirdik, ancak düğmeleriniz bildirimimizin ortasındaysa, bir mittevo zavantazhenі gibi daha nazik olurdu. odaklan.
css
girdi (anahat: yok; dolgu: 12 piksel; kenarlık yarıçapı: 3 piksel; kenarlık: 1 piksel düz siyah;) ::-webkit-input-yer tutucu ( /* Chrome */ renk: kırmızı; geçiş: opaklık 250ms kolay giriş ; ) :odak::-webkit-input-yer tutucu ( opaklık: 0,5; ) :-ms-input-yer tutucu ( /* IE 10+ */ renk: kırmızı; geçiş: opaklık 250ms kolay giriş-çıkış; ) :odak :-ms-input-yer tutucu ( opaklık: 0.5; ) ::-moz-yer tutucu ( /* Firefox 19+ */ renk: kırmızı; opaklık: 1; geçiş: opaklık 250ms kolaylık-çıkış; ) :odak:: -moz-yer tutucu ( opaklık: 0.5; ) :-moz-yer tutucu ( /* Firefox 4 - 18 */ renk: kırmızı; opaklık: 1; geçiş: opaklık 250ms giriş kolaylığı; ) : odak: -moz-yer tutucu ( opaklık: 0,5; )Metin, yoga benliğinin girişinde giderek daha fazla ana stile sahiptir ve opaklığa geçiş ister, böylece iyi bir güzelin hayatı büyür.
Yer tutucu - bir ipucu yerleştirebileceğiniz giriş alanının bir öğesi. Koristuvach veri girmeye başlarsa, korkmamak için ek metin bilinir. Dış görünüm tarayıcısı bir sonraki öğenin nasıl oluşturulacağını düşünebilir ve bazen varsayılan stiller tüm tasarımı bozar. Onlarla başa çıkmak için özel bir CSS yer tutucu kuralı kullanmanız gerekir.
Yer tutucu nerede bulunur?
Sorun şu ki, giriş alanı ipucu umutsuzca gölge DOM'de gizleniyor ve ulaşılması o kadar kolay değil. Kazanılacak özel bir standart olmayan sözde öğe CSS::placeholder vardır. Yoga ile yardımın yardımıyla tavsiyenin gücünü kullanabilirsiniz.
İlgileneceksiniz:
CSS yer tutucu stili şuna benzer:
input::yer tutucu ( renk: kırmızı; opaklık: 1; yazı tipi stili: italik; ) 
Tarayıcılar tarafından destek
CSS yer tutucusu tüm modern tarayıcılar tarafından iyi işlenir ve eski moda arayanlar için öneklerle hızlandırabilirsiniz:
- ::-webkit-input-placeholder - webkit tarayıcıları için (Safari, Chrome, Opera);
- ::-moz-yer tutucu - için Firefox tarayıcıları daha yüksek sürüm 19;
- :-moz-yer tutucu - için eski Firefox;
- :-ms-input-yer tutucu - için Internet Explorer daha yüksek sürüm 10.
görünüşe göre yaşlı Mozilla tarayıcıları, ve IE ayrıca yer tutucuya bir sözde öğe değil, bir CSS sözde sınıfı olarak saygı duyar. Bunları karşılaştırmayacağız, sadece girdi alanını şekillendirirken tüm yönü dikkate alıyoruz.
Stilizasyon olanakları
CSS'deki yer tutucu sözde öğesi için aşağıdaki parametreleri ayarlayabilirsiniz:
- arka plan - bir grup arka plan gücü. İpucu bloğunun arka planı tüm giriş alanı boyunca genişler. Hem rengi (arka plan rengi) hem de görüntüyü (arka plan görüntüsü) ayarlayabilirsiniz.
- metin rengi - renk;
- şeffaflık - opaklık;
- podkreslennya, nadkreslennya veya zakreslennya - metin dekorasyonu;
- kayıt - metin dönüştürme;
- iç adımlar- Dolgu malzemesi. Tüm tarayıcılar tarafından desteklenmez. Küçük elemanlara gelince, üst ve alt adımlar göz ardı edilir.
- yazı tipine - yazı tipi grubunun gücü, satır yüksekliği ve farklı adımlar (metin girintisi, harf aralığı, kelime aralığı);
- arka arkaya dikey hizalama - dikey hizalama;
- konteyner taştığında metin taşması – metin taşması.
Input1::placeholder ( background-image: linear-gradient(lime, blue); color: white; ) .input2::placeholder ( text-decoration: line-through; ::placeholder ( font-size: 16px; harf aralığı : 10px; ) .input4::placeholder ( arka plan: kahverengi; renk: beyaz; metin taşması: üç nokta; )
Odak
Zamovchuvannyam için, ipucu yalnızca bu durumda, yalnızca bir karakter girilmişse giriş alanından bilinir. Ek olarak, CSS yer tutucu sözde öğesi, bir alana odaklanırken çift tıklama uygulamanıza olanak tanır. Kimler için sözde sınıftan yoga kullanmak gerekiyor: odak.
girdi:odak::yer tutucu ( renk: şeffaf; )
Bazı tarayıcılarda, ek bir geçiş talimatını takiben bir dizi yer tutucu yetkideki bir değişikliği canlandırabilirsiniz.
input::yer tutucu ( renk: siyah; geçiş: renk 1s; ) input:odak::yer tutucu ( renk: beyaz; )
İÇİNDE Google tarayıcı Böyle bir alana odaklanırken Chrome ipucu rengi, bir saniyelik bir gecikmeyle sorunsuz bir şekilde değişir.
Eğer placeholder özniteliği hakkında bilginiz yoksa ne olduğunu ve nasıl çalıştığını açıklayalım. Formun giriş alanlarında zafer. Görüntülenecek öznitelik, şarkı söyleme isteminin rolünü temsil eden giriş alanına yazılır. Web sitemizde daha önce, ancak javascript'in yardımı için olumlu taraf verilen yöntem ce çapraz tarayıcı. Şimdi input ve textarea öğelerinde yer alan placeholder özniteliğinin stilinden bahsedelim.
Uygulamamızdaki giriş alanı kodu şöyle görünür:
Çıkışta aşağıdaki alanı alıyoruz:
Şimdi, bir dizi CSS kuralı yazmamız gereken yer tutucuya stil vermek için neye ihtiyacımız olduğunu netleştirelim:
::-webkit-input-placeholder ( color: #c1c1c1; ) ::-moz-placeholder ( color: #c1c1c1; ) /* Firefox 19+ */ :-moz-placeholder ( color: #c1c1c1; ) /* Firefox 18- */ :-ms-input-yer tutucu ( renk: #c1c1c1; )
alıyoruz:
Tüm otoriteleri değiştiremeyiz, ancak modern tarayıcılar tarafından desteklenen daha fazlasının bir listesi aşağıda listelenmiştir:
yazı tipi(yani güç toplamı)
arka fon(yani güç toplamı)
renk
kelime aralığı
harf boşluğu
metin-dekorasyon
dikey hizalama
metin dönüştürme
satır yüksekliği
metin girintisi
metin taşması
opaklık
Farklı tarayıcılarda, kural farklı bir şekilde yazılır, çünkü Tek bir standart olmamakla birlikte, bu kayıtlar dizisi güncel olmaya devam edecektir. IE tarayıcılarında ve 18'in altındaki Firefox sürümlerinde yer tutucu sözde sınıf olarak kabul edilir ve daha yeni Firefox tarayıcılarında webkit ve göz kırpma sözde öğe olarak değerlendirilir.
Yer tutucudaki kısa metin
Bazı ipuçları, giriş alanına sığmayacak kadar değerli olabilir. Bu amaçlar için ek güçlerle de hızlandırabilirsiniz, yani giriş alanındaki yer tutucu metni hızlandırmanıza olanak tanır.
Girdi ( text-overflow:ellipsis; ) input::-moz-placeholder ( text-overflow:ellipsis; ) input:-moz-placeholder ( text-overflow:elipsis; ) input:-ms-input-placeholder ( text-overflow : üç nokta; )
Sonuç olarak, aşağıdaki formun böyle bir yer tutucusunun giriş alanı kabul edilir:
Privuemo metin pid saat alana tıklayın
Tarayıcı, dış görünüm kapatıldığında pencerenin arkasındaki yer tutucunun tepkisini yorumlar. Bazı tarayıcılarda, sahaya vurduğunuz anda hemen kazanmak istersiniz, diğer tarayıcılarda, barizlik için giriş alanında bir karakter istersiniz. Bunu şu şekilde yapalım, ancak alana tıkladığınızda metin tüm tarayıcılarda gösterilecek.
:odak::-webkit-giriş-yer tutucu ( renk: şeffaf; ) :odak::-moz-yer tutucu ( renk: şeffaf; ) :odak:-moz-yer tutucu ( renk: şeffaf; ) :odak:-ms-input -yer tutucu (renk: şeffaf; )
Aşağıdaki eylemi gerçekleştiriyoruz:
Yer tutucu - bir ipucu yerleştirebileceğiniz giriş alanının bir öğesi. Koristuvach veri girmeye başlarsa, korkmamak için ek metin bilinir. Dış görünüm tarayıcısı bir sonraki öğenin nasıl oluşturulacağını düşünebilir ve bazen varsayılan stiller tüm tasarımı bozar. Onlarla başa çıkmak için özel bir CSS yer tutucu kuralı kullanmanız gerekir.
Yer tutucu nerede bulunur?
Sorun şu ki, giriş alanı ipucu umutsuzca gölge DOM'de gizleniyor ve ulaşılması o kadar kolay değil. Bu muzaffer uzmanlık için standart dışı :: yer tutucu. Yoga ile yardımın yardımıyla tavsiyenin gücünü kullanabilirsiniz.
CSS yer tutucu stili şuna benzer:
Girdi::yer tutucu ( renk: kırmızı; opaklık: 1; yazı tipi stili: italik; )
Tarayıcılar tarafından destek
CSS yer tutucusu tüm modern tarayıcılar tarafından iyi işlenir ve eski moda arayanlar için öneklerle hızlandırabilirsiniz:
- ::-webkit-input-placeholder - webkit tarayıcıları için (Safari, Chrome, Opera);
- ::-moz-placeholder - Firefox daha yüksek sürüm 19'daki tarayıcılar için;
- :-moz-yer tutucu - eski Firefox için;
- :-ms-input-placeholder – Internet Explorer sürüm 10 için.
Gördüğünüz gibi, eski Mozilla tarayıcıları ve IE, bir sözde öğeye değil, bir CSS sözde sınıfına sahip yer tutucuya saygı duyar. Bunları karşılaştırmayacağız, sadece girdi alanını şekillendirirken tüm yönü dikkate alıyoruz.
Stilizasyon olanakları
CSS'deki yer tutucu sözde öğesi için aşağıdaki parametreleri ayarlayabilirsiniz:
- arka plan - ipucu bloğunun grubu tüm giriş alanı boyunca genişler. Hem rengi (arka plan rengi) hem de görüntüyü (arka plan görüntüsü) ayarlayabilirsiniz.
- metin rengi - renk;
- şeffaflık - opaklık;
- podkreslennya, nadkreslennya veya zakreslennya - metin dekorasyonu;
- kayıt - metin dönüştürme;
- iç adımlar - dolgu. Tüm tarayıcılar tarafından desteklenmez. Küçük elemanlara gelince, üst ve alt adımlar göz ardı edilir.
- yazı tipine - yazı tipi grubunun gücü, satır yüksekliği ve farklı adımlar (metin girintisi, harf aralığı, kelime aralığı);
- arka arkaya dikey hizalama - dikey hizalama;
- konteyner taştığında metin taşması – metin taşması.
Odak
Zamovchuvannyam için, ipucu yalnızca bu durumda, yalnızca bir karakter girilmişse giriş alanından bilinir. Ale yer tutucu, alana odaklanırken görünümü arka arkaya uygulamanıza olanak tanır. Kimler için sözde sınıftan yoga kullanmak gerekiyor: odak.
Girdi:odak::yer tutucu (renk: şeffaf; )
Bazı tarayıcılarda, ek bir geçiş talimatını takiben bir dizi yer tutucu yetkideki bir değişikliği canlandırabilirsiniz.
Girdi::yer tutucu ( renk: siyah; geçiş: renk 1s; ) girdi:odak::yer tutucu ( renk: beyaz; )
tarayıcıda Google Chrome böyle bir alana odaklanırken ipucunun rengi bir saniyelik bir uzatma ile sorunsuz bir şekilde değişir.
Sözde eleman, yardım isteyen şık tasarım Yer tutucu özniteliği tarafından oluşturulan metni belirtir. Metnin görünümünü değiştirme, örneğin yazı tipini ve rengini ekleme gücünü kazanmaya izin verilir.
Sözdizimi
seçici::Yer tutucu ( ... )
Randevu
| Tanım | popo | |
|---|---|---|
| <тип> | Değerin türünü belirtin. | <размер> |
| A&B | Değer belirtilen sırada görüntülenebilir. | <размер> && <цвет> |
| bir | B | Lütfen proponasyonlardan (A veya B) sadece bir değer seçmeniz gerektiğini belirtin. | normal | küçük şapkalar |
| Bir || B | Ten anlamları, bağımsız olarak veya başkalarıyla birlikte yeterli bir sırayla fethedilebilir. | genişlik || saymak |
| Değerler grubu. | [kırp || geçmek] | |
| * | Sıfır veya daha fazla kez tekrarlayın. | [,<время>]* |
| + | Bir veya daha fazla kez tekrarlayın. | <число>+ |
| ? | Atama türü, kelime chi grubu obov'yazkovim değildir. | ek? |
| (A, B) | A'dan az değil, B'den fazla değil. | <радиус>{1,4} |
| # | Kimin aracılığıyla bir veya daha fazla kez tekrarlayın. | <время># |
popo
Popo sonucu Şekil 1'de gösterilmektedir. 1.
Pirinç. 1. Vikikaynak::yer tutucu
Not
Internet Explorer, sözde sınıf :-ms-input-placeholder'a sahiptir.
Microsoft Edge etiketi sözde öğesi ::-ms-input-placeholder.
Chrome, sürüm 57'den önce, Opera sürüm 44'ten önce, Safari sürüm 10.1'den önce ve Android ::-webkit-input-placeholder sözde öğesini vurgular.
Firefox 4'ten 19'a kadar olan sürümler :-moz-placeholder sözde sınıfını kullanır.
51 sürümünden önceki Firefox kötü niyetli sözde öğe ::-moz-yer tutucu.
tarayıcılar
tarayıcılar
Tarayıcı tabloları aynı değerlere sahiptir.
