Input stilleri
input etiketini biçimlendirmeyi öğrenirsin.
input seçicisi nedir?
Bir HTML formundaki metin kutuları, e-posta alanları ve parola girişleri çoğunlukla <input> etiketiyle gelir. CSS'te input yazarak bu etiketin tüm örneklerini seçersin.
Tarayıcı input'lara öntanımlı bir görünüm verir: ince kenarlık, soluk arka plan, küçük yazı tipi. Bu görünüm pek çok tasarımda yetersiz kalır. Biçimlendirme, form alanını okunur ve dokunması kolay hale getirir.
Padding ve yazı boyutu
Bir input'u rahat kullanılır kılmak için iç boşluk (padding) ve yazı boyutu gerekir. Varsayılan input küçük ve dardır; parmakla dokunmak zordur.
Yaygın bir ayar: padding: 12px 16px; ve font-size: 1rem;. Böylece alan genişler, yazı okunur olur. Tüm alanları tek seferde biçimlemek için input seçicisi yeter.
Uygulama Bir form alanını biçimle
.field seçicisi içine üç özellik yaz: padding: 12px 16px;, font-size: 1rem;, border: 1px solid #ccc;.
Örnek çözümü göster
.field seçicisi aç; üç bildirimi alt alta yaz.
Örnek çözüm:
.field {
padding: 12px 16px;
font-size: 1rem;
border: 1px solid #ccc;
}Kendini test et
-
Hangisi tüm input alanlarını seçer?
- form { ... }
- input { ... }
- .input { ... }
- #input { ... }
Cevabı göster
input { ... } — Doğru! input bir tür seçicisidir ve tüm input etiketlerini yakalar.
-
input'a iç boşluk ver
input { ____: 12px 16px; font-size: 1rem; }Cevabı göster
input { padding: 12px 16px; font-size: 1rem; } -
input özelliklerini eşleştir
- padding
- iç boşluk
- font-size
- yazı boyutu
- border
- kenarlık
- background
- arka plan