css-formlar

Bir HTML formunun görünümü CSS ile büyük ölçüde geliştirilebilir:

width Giriş alanının genişliğini belirlemek için özelliği kullanın :
input {
width: 100%;
}
Yukarıdaki örnek tüm <input > öğelerine uygulanır. Yalnızca belirli bir giriş türünü stil yapmak istiyorsanız, özellik seçicilerini kullanabilirsiniz:
input[type=text] - sadece metin alanlarını seçecek
input[type=password] - sadece şifre alanlarını seçecek
input[type=number] - sadece sayı alanlarını seçecek

padding Metin alanının içine alan eklemek için özelliği kullanın .
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
box-sizing Özelliği ayarladığımızı unutmayın border-box. Bu, doldurma ve sonunda kenarların, elemanların toplam genişliğine ve yüksekliğine dahil edildiğinden emin olur.

border Kenarlık boyutunu ve rengini değiştirmek için mülkü kullanın ve border-radius yuvarlanmış köşeler eklemek için özelliği kullanın:
input[type=text] {
border: 2px solid red;
border-radius: 4px;
}
Yalnızca alt kenarlık istiyorsanız, border-bottomözelliği kullanın :
input[type=text] {
border: none;
border-bottom: 2px solid red;
}

Kullanım background-color girdi ve bir arka plan renk katmak özelliği color metin rengini değiştirmek için özellik:
input[type=text] {
background-color: #3CBC8D;
color: white;
}

Varsayılan olarak, bazı tarayıcılar, odak aldığında (tıklandığında) girdi etrafında mavi bir anahat ekleyecektir. Bu davranışı outline: none; girdiye ekleyerek kaldırabilirsiniz .
:focus Odaklandığında, giriş alanıyla bir şeyler yapmak için seçiciyi kullanın :
input[type=text]:focus {
background-color: lightblue;
}
input[type=text]:focus {
border: 3px solid #555;
}

Girdi içinde bir simge istiyorsanız, background-image özelliği kullanın ve özelliği ile konumlandırın background-position. Ayrıca, simgenin alanını ayırmak için büyük bir sol dolgu eklediğimizi de unutmayın:
input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}

Bu örnekte transition, odaklandığı zaman arama girişinin genişliğini canlandırmak için CSS özelliğini kullanıyoruz . Daha transition sonra, CSS Geçişleri bölümümüzde mülk hakkında daha fazla bilgi edineceksiniz .
input[type=text] {
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}

Stylare Textareas
İpucu:resize Textareas'ın yeniden boyutlandırılmasını önlemek için özelliği kullanın (sağ alt köşedeki "yakalayıcıyı" devre dışı bırakın):
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çme Menüleri
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}