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

Sıradaki ders: Label ve placeholder

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler