Yer tutucu, alanın adını görüntülemekten sorumlu bir sözde sınıf veya sözde öğedir. Özünde, bu, içine bir kelime girdiğiniz ve kullanıcının onu içeride gördüğü etikettir (basitlik için buna diyelim). Her form alanı için bir tür ipucu veya ad.
Her tarayıcı bu etiketi farklı şekilde ele alır ve stili arzulanan çok şey bırakır. Varsayılan stilleri değiştirmek için stil dosyasına birkaç satır kod eklemeniz yeterlidir. Zor bir şey yok.
Hepimizin değişemeyeceği gerçeği akılda tutulmalıdır.
Stil çeşitliliği arasında, bu durumda aşağıdakiler bizim için mevcuttur:
- yazı tipi ağırlığı - metnin ağırlığını ayarlama
- yazı tipi boyutu - metin boyutu seçimi
- yazı tipi ailesi - yazı tipi seçimi
- arka plan — arka plan ve arka plan resmi
- renk - metin rengi
- kelime aralığı - kelimeler arasındaki boşluğu ayarlama
- harf aralığı - harfler arasındaki boşluğu ayarlayın
- metin dekorasyonu - kelime dekorasyonu seçimi. Altı çizili, üstü çizili vb.
- dikey hizala - dikey hizalamayı ayarla
- text-transform - metni değiştirme seçimi. Tüm büyük veya küçük harfler, vb.
- satır yüksekliği - satırlar arasındaki boşluk
- text-indent - paragrafın ilk satırının sol girintisini ayarlar
- metin taşması - bloğa sığmayan metni görüntüleme seçimi (gizle veya kırp ve üç nokta ekle)
- opaklık - öğenin şeffaflığını seçin
Artık mevcut stilleri anladığımıza göre, dekorasyona başlayabiliriz, bunun için aşağıdaki stilleri ekleyeceğiz:
::-webkit-input-yer tutucu ( renk: #2cb04d; )
::-moz-yer tutucu ( color: #2cb04d; )/* Firefox 19+ */
:-moz-yer tutucu ( renk: #2cb04d; ) /*Firefox 18- */
:-ms-input-yer tutucu ( renk: #2cb04d; )
Bu satırları ekledikten sonra form alanları içindeki başlıkların rengi değişecek ve her tarayıcıda aynı olacaktır. Burada ek stiller ekleyebilirsiniz.
Örneğin, bu tarz
::-webkit-input-yer tutucu (renk: #2cb04d; yazı tipi boyutu: 1.5em; yazı tipi ağırlığı: 600;)
::-moz-yer tutucu (renk:#2cb04d; yazı tipi boyutu:1.5em; yazı tipi ağırlığı:600;) /*Firefox 19+*/
:-moz-yer tutucu (renk:#2cb04d; yazı tipi boyutu:1.5em; yazı tipi ağırlığı:600;) /*Firefox 18-*/
:-ms-input-yer tutucu (renk: #2cb04d; yazı tipi boyutu: 1.5em; yazı tipi ağırlığı: 600;)
renk ekle, büyük beden ve orta kalın metin. Ek bir özellik eklerseniz -
text-overflow:elipsis daha sonra metin, sonuna bir üç nokta eklenerek kenar boşluğuna sığacak şekilde kesilecektir.
Bir başka ilginç özellik daha var, animasyonun css (stiller) içindeki görünümü sayesinde, imleci alana getirdiğinizde güzel bir gizleme kurabilirsiniz. Daha önce, bu js (komut dosyaları) aracılığıyla yapıldı.
Giriş::-webkit-input-yer tutucu (opaklık: 1; geçiş: opaklık 0.3s kolaylık;)
.input::-moz-placeholder (opaklık: 1; geçiş: opaklık 0.3s kolaylık;)
.input:-moz-placeholder (opaklık: 1; geçiş: opaklık 0.3s kolaylık;)
.input:-ms-input-placeholder (opaklık: 1; geçiş: opaklık 0.3s kolaylık;)
.input:focus::-webkit-input-placeholder (opaklık: 0; geçiş: opaklık 0.3s kolaylık;)
.input:focus::-moz-placeholder (opaklık: 0; geçiş: opaklık 0.3s kolaylık;)
.input:focus:-moz-placeholder (opaklık: 0; geçiş: opaklık 0.3s kolaylık;)
.input:focus:-ms-input-placeholder (opaklık: 0; geçiş: opaklık 0.3s kolaylık;)
Bu tür stiller eklemek, imleç alana yerleştirildiğinde yer tutucunun kararmasına neden olur.
.input, form öğesi sınıfıdır. Stillerin çalışması için form alanı kodu şöyle görünmelidir:
Veya element sınıfını kullanabilirsiniz. Böylece her form için farklı stiller belirleyebilirsiniz.
.contacts-form giriş::-webkit-input-placeholder (renk: #2cb04d; yazı tipi boyutu: 1.5em; yazı tipi ağırlığı: 600;)
.contacts-form form girişi::-moz-placeholder (renk: #2cb04d; yazı tipi boyutu: 1.5em; yazı tipi ağırlığı: 600;)/*Firefox 19+*/
.contacts-form form girişi:-moz-yer tutucu (renk: #2cb04d; yazı tipi boyutu: 1.5em; yazı tipi ağırlığı: 600;)/*Firefox 18-*/
.contacts-form form girişi:-ms-input-yer tutucu (renk: #2cb04d; yazı tipi boyutu: 1.5em; yazı tipi ağırlığı: 600;)
İşte formun gerçekten güzel bir tasarımını yapmanın bazı basit yolları.
Yer tutucu - ipucu yerleştirebileceğiniz bir giriş alanı öğesi. Kullanıcı veri girmeye başladığında, müdahale etmemek için yardım metni kaybolur. Her tarayıcının bu öğenin nasıl görüntülenmesi gerektiği konusunda kendi görüşü vardır ve bazen varsayılan stiller tüm tasarımı bozar. Bunları kontrol etmek için özel bir yer tutucu CSS kuralı kullanmanız gerekir.
Yer tutucu nerede?
Sorun, giriş alanı ipucunun gölge DOM'de güvenli bir şekilde gizlenmesi ve buna ulaşmanın o kadar kolay olmamasıdır. Bunun için standart olmayan özel bir sözde eleman CSS::placeholder kullanılır. Bununla birlikte, araç ipucunun özelliklerini kontrol edebilirsiniz.
İlgileneceksiniz:
Yer tutucuyu CSS'de şekillendirmek şöyle görünür:
input::yer tutucu ( renk: kırmızı; opaklık: 1; yazı tipi stili: italik; ) 
Tarayıcı Desteği
CSS yer tutucu sözde öğesi tüm modern tarayıcılar tarafından iyi işlenir ve eski tarayıcıları desteklemek için önekler kullanılabilir:
- ::-webkit-input-placeholder - webkit tarayıcıları için (Safari, Chrome, Opera);
- ::-moz-placeholder - sürüm 19'un üzerindeki Firefox tarayıcıları için;
- :-moz-yer tutucu - eski Firefox için;
- :-ms-input-yer tutucu - için Internet Explorer sürüm 10'un üstünde.
Gördüğünüz gibi, eski Mozilla tarayıcıları ve IE, yer tutucuyu bir sözde öğe değil, bir CSS sözde sınıfı olarak kabul eder. Onlarla tartışmayacağız, girdi alanını şekillendirirken sadece bu yönü dikkate alacağız.
stil seçenekleri
CSS'de yer tutucu sözde öğesi için aşağıdaki seçenekleri ayarlayabilirsiniz:
- arka plan - bir grup arka plan özelliği. İpucu bloğunun arka planı tüm giriş alanını kapsar. Yalnızca rengi (arka plan rengi) değil, aynı zamanda görüntüyü (arka plan görüntüsü) de ayarlayabilirsiniz.
- metin rengi - renk;
- şeffaflık - opaklık;
- alt çizgi, üst çizgi veya üstü çizili - metin dekorasyonu;
- kayıt - metin dönüştürme;
- dolgu - dolgu. Tüm tarayıcılar tarafından desteklenmez. Satır içi öğelerde olduğu gibi, üst ve alt dolgu yok sayılır.
- yazı tipi görüntüleme - yazı tipi grubunun özellikleri, satır yüksekliği ve çeşitli girintiler (metin girintisi, harf aralığı, kelime aralığı);
- çizgide dikey hizalama - dikey hizalama;
- konteyner taştığında metni kırpma - metin taşması.
Girdi1::yer tutucu ( arka plan görüntüsü: doğrusal gradyan(kireç, mavi); renk: beyaz; ) .input2::yer tutucu ( metin dekorasyonu: satır arası; renk: mor; yazı tipi ağırlığı: kalın; ) .input3 ::yer tutucu ( yazı tipi boyutu: 16 piksel; harf aralığı: 10 piksel; ) .input4:: yer tutucu ( arka plan: kahverengi; renk: beyaz; metin taşması: üç nokta; )
Odakta
Varsayılan olarak, ipucu, yalnızca içine en az bir karakter girildiğinde giriş alanından kaybolur. Ancak CSS yer tutucu sözde öğesi, alan odaklandığında kaybolmayı hemen uygulamanıza izin verir. Bunu yapmak için, onu :focus sözde sınıfıyla birleştirmeniz gerekir.
girdi:odak::yer tutucu ( renk: şeffaf; )
Bazı tarayıcılarda, geçiş deyimini kullanarak bir dizi yer tutucu özelliğindeki bir değişikliği canlandırmak kabul edilebilir.
input::yer tutucu ( renk: siyah; geçiş: renk 1s; ) input:odak::yer tutucu ( renk: beyaz; )
Tarayıcıda Google Chrome böyle bir alana odaklanırken ipucunun rengi bir saniye içinde sorunsuz bir şekilde değişecektir.
Birçoğunuz, ipucu olarak imzaları olan formlarla sık sık karşılaşmışsınızdır. Yazarken kayboluyorlar. Yani - bu, metin girişi (giriş) için oluşturulan öğeler için olan yer tutucu özniteliğidir. Bununla, bu alana girmeden önce ipucu olarak görüntülenecek metni ayarlayabilirsiniz. Ne yazık ki, tüm tarayıcılar bu öznitelikle eşit derecede iyi çalışmaz. Eski sürümler bu metni hiç göstermez.
Şimdi aşağıda açıklanan sorunları çözmek için nasıl yapılacağına bakalım:
1. Yer tutucu için stiller nasıl değiştirilir;
2. Yer tutucunun metni girerken değil, alana tıklandığında nasıl gizlenir;
3. Prensipte yer tutucunun gösterilmediği tarayıcılarla ne yapılmalı.
Tüm örneklerde giriş alanıyla çalışacağız.
Girişte yer tutucudaki ipucu metninin rengi nasıl değiştirilir?
Artık her tarayıcının yalnızca yer tutucuyu farklı göstermediği, aynı zamanda stilleri değiştirmek için özel özellikler gerektirdiği artık bir haber değil. Ve yazılı olarak karşılık gelen öneklerden bahsetmiyorum. Onlara bir göz atalım.Araç ipucu rengi, birçok tarayıcıda varsayılan olarak gridir. AT bu örnek siyah yapalım.
Saydamlıktan sorumlu olan opacity özelliği, bu öğe için saydamlığı destekleyen tarayıcılar için girilmelidir. Aksi takdirde, varsayılan olarak renk gri olacaktır.
Ve evet, bu özellikleri belirtmek için sınıfları kullanabilirsiniz. Aşağıya bakınız:
Giriş-telefon::-webkit-input-yer tutucu ( renk:kırmızı; )
.input-text::-webkit-input-placeholder ( renk:yeşil; )
/* vb... */
Bir alana tıklandığında yer tutucuyu kaldır
Varsayılan olarak, tarayıcılarda, yer tutucu özelliğinden gelen metin yalnızca giriş başladıktan sonra kaybolur, ancak bu metnin zaten giriş alanına tıklama aşamasında dikkati dağıtmamasını isteyenler vardır. Çoğu zaman sadece bunu yaparlar. Bunu yapmak için, ipucu metninin renginin tamamen şeffaf hale geldiği, yani artık görünemeyeceği odak için stiller yazmanız gerekir.:odak::-webkit-input-yer tutucu (opaklık:0;)/* webkit */
:odak::-moz-yer tutucu (opaklık:0;)/* Firefox 19+ */
:odak:-moz-yer tutucu (opaklık:0;)/* Firefox 18- */
:odak:-ms-input-yer tutucu (opaklık:0;)/* IE */
Hatta CSS animasyonu ile şeffaflıkta yumuşak bir değişiklik veya renkte bir değişiklik ayarlayabilirsiniz. Ancak bu tür çözümlerin tarayıcılar arası uyumluluğu ile ilgili sorunlar olabilir.
Peki ya girdideki yer tutucu niteliğini desteklemeyen tarayıcılar?
Eh, kesinlikle kaybolmamak için) Evet, gerçekten de böyle tarayıcılar var. Örneğin, IE8. Ve evet, onu her zaman kullanacak usta insanlar var. Tüm ziyaretçiler için bir çözüm oluşturmanız gerekiyorsa, biraz daha sabırlı olun.Bu sorunu çözmek için, bunun için popüler bir jquery eklentisi indirin - jquery.placeholder. Link vermeyeceğim çünkü bugün veya yarın değişecekler. Ancak, herhangi bir şey varsa, eklenti ile çalışan bir örnek indirebilirsiniz - kaynağı indirin.
Bağlıyoruz. Prensip olarak jquery'yi de bağlamanız gerektiğini unutmayın.
Yer tutucu özniteliği tarafından oluşturulan bilgi istemi metninin stilini ayarlayan sözde bir öğe. Metnin görünümünü değiştirmek, örneğin yazı tipini ve rengini ayarlamak için özellikleri kullanabilirsiniz.
Sözdizimi
seçici::Yer tutucu ( ... )
gösterim
| Tanım | Misal | |
|---|---|---|
| <тип> | Değerin türünü belirtir. | <размер> |
| A&B | Değerler belirtilen sırada çıktı alınmalıdır. | <размер> && <цвет> |
| bir | B | Önerilen değerlerden (A veya B) yalnızca birinin seçilmesi gerektiğini belirtir. | normal | küçük şapkalar |
| Bir || B | Her değer tek başına veya herhangi bir sırayla diğerleriyle birlikte kullanılabilir. | genişlik || saymak |
| Grup değerleri. | [ kırp || geçmek] | |
| * | Sıfır veya daha fazla kez tekrarlayın. | [,<время>]* |
| + | Bir veya daha fazla kez tekrarlayın. | <число>+ |
| ? | Belirtilen tür, sözcük veya grup isteğe bağlıdır. | ek? |
| (A, B) | En az A'yı tekrarlayın, ancak B'den fazla değil. | <радиус>{1,4} |
| # | Virgülle ayırarak bir veya daha fazla kez tekrarlayın. | <время># |
Misal
Örneğin sonucu Şekil 1'de gösterilmektedir. 1.
Pirinç. 1. Kullanım:: yer tutucu
Not
Internet Explorer :-ms-input-placeholder sözde sınıfını kullanır.
Microsoft Edge, ::-ms-input-placeholder sözde öğesini kullanır.
Chrome 57 sürümünden önce, Opera 44 sürümünden önce, Safari 10.1 sürümünden önce ve Android ::-webkit-input-placeholder sözde öğesini kullanır.
4'ten 19'a kadar olan Firefox, sözde sınıf :-moz-placeholder kullanır.
Sürüm 51'den önceki Firefox ::-moz-placeholder sözde öğesini kullanır.
tarayıcılar
tarayıcılar
Tarayıcı tablosunda aşağıdaki gösterim kullanılır.
Yer tutucu özelliği, boş giriş alanları (etiketler) içinde araç ipuçları oluşturmak için kullanılır. ve