Boshqa forma elementlari
Textarea elementini uslublash
Standart holatda <textarea> o‘ng pastki burchakdagi "cho‘zgich" yordamida o‘lchami o‘zgartirilishi mumkin. Cho‘zgichni olib tashlash uchun resize xossasini none qilib belgilang:
Misol
textarea
{
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
O‘zingiz sinab ko‘ring »
Ochiluvchi menyuni uslublash
Misol
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
O‘zingiz sinab ko‘ring »
Forma tugmalarini uslublash
"button", "submit" va "reset" turidagi shakl tugmalarini ham CSS bilan ushlab kelish mumkin:
Misol
input[type=button], input[type=submit], input[type=reset]
{
background-color: #04AA6D;
border:
none;
color: white;
padding:
16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* Tip: use width: 100% for full-width buttons */
O‘zingiz sinab ko‘ring »
Maslahat: Tugmalarni bezash haqida ko‘proq ma’lumot olish uchun CSS Buttons darsligimizni o‘qing.
CSS moslashuvchan forma
Quyidagi misol moslashuvchan forma yaratish uchun CSS media so‘rovlaridan foydalanadi. Siz media so‘rovlar haqida keyingi bobda ko‘proq bilib olasiz.
Ekran 600px dan kichik bo‘lganda, yorliqlar va input maydonlarini yonma-yon emas, bir-biri ustiga taxlaymiz.
Shakl maketi o‘zgarishini ko‘rish uchun ekran o‘lchamini o‘zgartiring!
O‘zingiz sinab ko‘ring »W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!