CSS Form

CSS kullanarak HTML formlarının görünümünü büyük ölçüde iyileştirebilirsiniz:

Kişisel olarak deneyin

giriş alanının stillerini ayarlayın

kullan width öznitelikle giriş alanının genişliğini belirleyin:

örnek

input {
  width: 100%;
}

Kişisel olarak deneyin

Örnek, tüm <input> elementleri için geçerlidir. Belirli bir giriş türünün stillerini ayarlamak istiyorsanız, öznitelik seçici kullanabilirsiniz:

  • input[type=text] - Sadece metin alanlarını seçin
  • input[type=password] - Sadece şifre alanlarını seçin
  • input[type=number] - Sadece sayısal alanları seçin
  • ve benzerleri...

giriş alanını doldurun

kullan padding öznitelikle metin alanına içerik ekler.

Uyarı:Bir çok giriş varsa, etrafına daha fazla boşluk eklemek için harici marj eklemeniz gerekebilir:

örnek

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Kişisel olarak deneyin

Lütfen dikkat edin, box-sizing öznitelik olarak ayarlanmıştır border-boxBu, elementin toplam genişliğini ve yüksekliğini içeren dolgu (dolgu) ve son çerçeveyi güvence altına alır.

Lütfen CSS Box Sizing Bu bölümde box-sizing öznitelik hakkında daha fazla bilgi edinin.

çerçeve ile giriş alanı

Lütfen border öznitelikle çerçeve kalınlığını ve rengini değiştirin ve border-radius öznitelikle yuvarlak köşeler ekleyin:

örnek

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

Kişisel olarak deneyin

Sadece alt çizgi gerekiyorsa, border-bottom Öznitelik:

örnek

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

Kişisel olarak deneyin

renkli giriş alanı

Lütfen background-color öznitelikle giriş alanına arka plan rengi ekleyin ve color öznitelikle metin rengini değiştirebilirsiniz:

örnek

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}

Kişisel olarak deneyin

odaklanmış giriş alanı

Varsayılan olarak, bazı tarayıcılar giriş alanına odaklandığında (tıkladığında) etrafına mavi kontur ekler. Bu durumu ortadan kaldırmak için giriş alanına outline: none; bu davranışı ortadan kaldırmak için.

kullan :focus Seçici, giriş alanına odaklandığında ona stil tanımlayabilir:

Örnek 1

input[type=text]:focus {
  background-color: lightblue;
}

metin kutusuna tıklayın:

Kişisel olarak deneyin

Örnek 2

input[type=text]:focus {
  border: 3px solid #555;
}

metin kutusuna tıklayın:

Kişisel olarak deneyin

simge/RESIM içeren giriş kutusu

giriş kutusuna simge içerik eklemek istiyorsanız, kullanın background-image özellik, ve onu background-position özellikleri birlikte ayarlayarak. Ayrıca, büyük bir sol iç dolgu (padding-left) ekledik, simge alanı için yer ayırmak:

örnek

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding-left: 40px;
}

Kişisel olarak deneyin

animasyonlu arama giriş kutusu

Bu örnekte, CSS transition özellik, arama giriş kutusunun odaklandığında genişlik değişimlerine animasyon ayarlar. Daha sonra, bizim CSS Geçişler bir bölümde daha fazla öğreneceksiniz transition özellik bilgisini.

örnek

input[type=text] {
  transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
  width: 100%;
}

Kişisel olarak deneyin

metin alanının tarzını ayarla

Uyarı:kullan resize özellikleri textareas'ın boyutunu ayarlamayı önler (sağ alt köşedeki “çekiç”i devre dışı bırakır):

örnek

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

Kişisel olarak deneyin

seçim menüsünün tarzını ayarla

örnek

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

Kişisel olarak deneyin

giriş düğmesinin tarzını ayarla

örnek

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
/* İpucu: Tam genişlik düğmeleri elde etmek için width: 100% kullanın */

Kişisel olarak deneyin

CSS ile düğme stillerini nasıl ayarladığını öğrenmek için bizim CSS Düğmeler Eğitim.

Duyarlı Menü

TIY Editör Penceresinin Boyutunu Ayarlayarak Etkiyi Görün. Ekran genişliği 600 pikselden küçük olduğunda, iki sütun yatay yerine dikey olarak üst üste yerleştirilir.

İleri: Sonraki örnekler Medya Sorgusu Duyarlı Form Oluşturmak İçin. Bir sonraki bölümde daha fazla bilgi öğreneceksiniz.

Duyarlı Menüyü Görüntüle