CSS Formları
Bir HTML formunun görünümü CSS ile büyük ölçüde geliştirilebilir:
Stil Girdi Alanları
widthGiriş alanının genişliğini belirlemek için özelliği kullanın :
Örnek
input
{
width: 100%;
}
Yukarıdaki örnek tüm <input> öğeleri için geçerlidir. Yalnızca belirli bir giriş türüne stil vermek istiyorsanız, nitelik seçicileri kullanabilirsiniz:
input[type=text]- sadece metin alanlarını seçecekinput[type=password]- sadece şifre alanlarını seçecekinput[type=number]- sadece sayı alanlarını seçecek- vb..
Dolgulu Girişler
paddingMetin alanına boşluk eklemek için özelliği kullanın .
İpucu: Birbiri ardına çok sayıda girdiniz olduğunda margin, bunların dışında daha fazla alan eklemek için bazılarını da eklemek isteyebilirsiniz:
Örnek
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
box-sizingÖzelliği olarak
ayarladığımızı unutmayın border-box. Bu, dolgunun ve nihayetinde sınırların, öğelerin toplam genişliğine ve yüksekliğine dahil edilmesini sağlar. CSS Kutu Boyutlandırma bölümümüzde mülk
hakkında daha fazla bilgi edinin .box-sizing
Sınırlı Girişler
borderKenarlık boyutunu ve rengini değiştirmek için özelliği kullanın ve yuvarlatılmış border-radiusköşeler eklemek için özelliği kullanın:
Örnek
input[type=text]
{
border: 2px solid red;
border-radius: 4px;
}
Yalnızca bir alt kenarlık istiyorsanız, border-bottomözelliği kullanın:
Örnek
input[type=text]
{
border: none;
border-bottom: 2px solid red;
}
Renkli Girişler
background-colorGirdiye bir arka plan rengi eklemek için özelliği colorve metin rengini değiştirmek için özelliği kullanın:
Örnek
input[type=text]
{
background-color: #3CBC8D;
color: white;
}
Odaklanmış Girdiler
Varsayılan olarak, bazı tarayıcılar, odaklandığında (tıklandığında) girişin etrafına mavi bir anahat ekler. outline: none;Girişe ekleyerek bu davranışı kaldırabilirsiniz .
:focusOdaklandığında giriş alanıyla bir şeyler yapmak için seçiciyi kullanın :
Örnek
input[type=text]:focus
{
background-color: lightblue;
}
Örnek
input[type=text]:focus
{
border: 3px solid #555;
}
Simge/resim ile giriş
Girişin içinde bir simge istiyorsanız, özelliği kullanın background-imageve onu özellik ile konumlandırın background-position. Ayrıca, simgenin alanını ayırmak için büyük bir sol dolgu eklediğimize dikkat edin:
Örnek
input[type=text]
{
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
}
Animasyonlu Arama Girişi
Bu örnekte transition, odaklandığında arama girişinin genişliğini canlandırmak için CSS özelliğini kullanıyoruz.
transitionDaha sonra, CSS Geçişleri bölümümüzde mülk hakkında daha fazla bilgi edineceksiniz .
Örnek
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
Stil Metin Alanları
İpucu: Metin alanlarının yeniden boyutlandırılmasını önlemek için özelliği kullanın resize(sağ alt köşedeki "tutucuyu" devre dışı bırakın):
Ö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;
}
Stil Seçimi Menüleri
Örnek
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
Şekillendirme Giriş Düğmeleri
Ö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;
}
/* Tip: use width: 100% for full-width buttons */
Düğmelere CSS ile stil verme hakkında daha fazla bilgi için CSS Düğmeleri Eğitimimizi okuyun .
Duyarlı Form
Efekti görmek için tarayıcı penceresini yeniden boyutlandırın. Ekran genişliği 600 pikselden az olduğunda, iki sütunu yan yana değil üst üste istifleyin.
Gelişmiş: Aşağıdaki örnek , duyarlı bir form oluşturmak için medya sorgularını kullanır. Daha sonraki bir bölümde bunun hakkında daha fazla bilgi edineceksiniz.