Bir HTML formunun göz ölçüde CSS ile geliştirilebilir:
Girdi Alanları Styling
Kullanım width giriş alanının genişliğini belirlemek için özellik:
Yukarıdaki örnek için geçerli olan <input> elemanları. Yalnızca belirli bir girdi türü stil isterseniz, özellik seçicileri kullanabilirsiniz:
-
input[type=text]- Yalnızca metin alanları seçecektir -
input[type=password]- sadece şifre alanlarını seçecek -
input[type=number]- Sadece sayı alanlarını seçecek - vb..
Yastıklı Girdiler
Kullanım padding metni alanının içine boşluk eklemek için özellik.
İpucu: Birbirinize sonra birçok girdi varsa, aynı zamanda bazı eklemek isteyebilirsiniz margin bunların dışında daha fazla yer eklemek için:
Örnek
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
} Kendin dene " Biz belirledik unutmayın box-sizing mülkü border-box . Bu vatka ve sonunda sınırları elemanlarının toplam genişliği ve yüksekliği dahil olmasını sağlar.
Hakkında daha fazlasını okuyun box-sizing bizim mülkiyet CSS3 Kutu Boyutlandırma bölüm.
Bordürlü Girdiler
Kullan border ötesi boyutunu ve rengini değiştirmek ve kullanmak üzere özellik border-radius yuvarlatılmış köşeler eklemek için özellik:
Yalnızca bir alt sınır istiyorsanız, kullanmak border-bottom özelliğini:
Renkli Girdiler
Kullanım background-color girişine bir arka plan rengi ve ekleme özelliği color metin rengini değiştirmek için özellik:
odaklanmış Girdiler
Odağı aldığında Varsayılan olarak, bazı tarayıcılar girdi etrafında mavi bir anahat katacak (clicked on) . Sen ekleyerek bu davranışı kaldırabilirsiniz outline: none; girişine.
Kullanım :focus odağı aldığında giriş alanına bir şeyler yapmak seçici:
simgesi / görüntü ile Girdi
Girilecek içindeki bir simgeye istiyorsanız, kullanmak background-image özelliği ile konumlandırmak background-position özelliği. Ayrıca simgesinin yer ayırtmak için büyük sol dolguya eklemek fark:
Örnek
input[type=text]
{
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
} Kendin dene " Hareketli Arama Giriş
Bu örnekte, CSS3 kullanmak transition odağı alır arama girişinin genişlik animasyon özelliği. Sen hakkında daha fazla öğreneceksiniz transition bizim de, daha sonra mülkiyet CSS3 Geçişler bölüm.
Örnek
input[type=text] {
-webkit-transition: width 0.4s
ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
} Kendin dene " Şekillendirme textareas
İpucu: kullan resize resized olmaktan textareas önlemek için özellik (disable the "grabber" in the bottom right corner) :
Ö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;
} Kendin dene " Şekillendirme Seç Menüler
Örnek
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
} Kendin dene " Girdi Düğmeleri Styling
Ö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 */ Kendin dene " CSS ile düğmeleri stilini nasıl hakkında daha fazla bilgi için lütfen okuyunuz CSS Düğmeleri Eğitimi .