::placeholder
::placeholder ile input ipucu stillerini öğrenirsin.
::placeholder nedir?
HTML input ve textarea alanları placeholder özniteliği ile boşken görünen bir ipucu metni taşır. ::placeholder sözde elementi bu ipucu metnini biçimler. input::placeholder { color: gray; } ipucu yazısını gri yapar.
İpucu yalnızca alan boşken görünür; kullanıcı yazmaya başlayınca kaybolur. Bu sözde element ipucunun stilini değiştirir; alanın yazdığı metni değil.
İpucu mu, varsayılan değer mi?
placeholder ile varsayılan değer sık karıştırılır. İpucu, placeholder özniteliğine yazılır ve alan boşken görünen silik metindir; kullanıcı yazmaya başlayınca kaybolur, sunucuya gönderilmez.
Varsayılan değer ise value özniteliğine yazılır ve alanın gerçek içeriğidir; kullanıcı silmediği sürece gönderilir. Yani placeholder="E-posta" ipucu verir, value="@" ise alanı doldurur.
Uygulama ::placeholder rengini ayarla
Bir input tür seçicisine ::placeholder sözde elementi ekle. İçine color: gray ve font-style: italic tanımla. Böylece boş alandaki ipucu metni gri ve italik olur.
Örnek çözümü göster
/* input ipucu stilini ekle */
input::placeholder {
color: gray;
font-style: italic;
}Kendini test et
-
::placeholder neyi hedefler?
input::placeholder { color: gray; }- Kullanıcının yazdığı metni
- Boş alandaki ipucu metnini
- Input'un çerçevesini
- Input etiketinin yanındaki başlığı
Cevabı göster
Boş alandaki ipucu metnini — Doğru. ::placeholder yalnızca alan boşken görünen ipucu metnini biçimler.
-
input::placeholder bloğunu yaz
input____ { color: gray; font-style: italic; }Cevabı göster
input::placeholder { color: gray; font-style: italic; } -
Sözde elementi açıklamasına eşle
- ::placeholder
- Boş input ipucu
- ::selection
- Seçili metin
- ::first-line
- İlk satır
- ::before
- İçerik öncesi