Input maydonlarini bezash

Forma kiritish maydonlarini uslublash

CSS yordamida turli input turlarining aksariyatini uslublash mumkin: matn maydonlari, parol maydonlari, belgilash katakchalari, radio tugmalar va fayl inputlari. Input yorliqlari va shakl tugmalarini ham uslublash mumkin.

Input maydonlarini uslublash uchun keng ishlatiladigan CSS xossalari:

Input kengligini uslublash

width xossasi input maydoni kengligini belgilash uchun ishlatiladi.

Maslahat: HTML input matn maydonining standart kengligi 20 belgidir.

Bu yerda width ni 100% qilib belgilaymiz:

First Name

Misol

input {
width: 100%;
}

O‘zingiz sinab ko‘ring »

Yuqoridagi misol barcha <input> elementlariga qo‘llaniladi. Agar siz faqat ma’lum bir kiritish turini bezashni istasangiz, atribut selektorlaridan foydalanishingiz mumkin:

input[type=text] — faqat matn maydonlarini tanlaydi
input[type=password] — faqat parol maydonlarini tanlaydi
input[type=number] — faqat son maydonlarini tanlaydi
etc..

Input paddingini uslublash

padding xossasi matn maydoni ichiga bo‘shliq qo‘shish uchun ishlatiladi.

Maslahat: Bir-biridan keyin bir nechta input maydon bo‘lsa, ular atrofiga ko‘proq bo‘shliq qo‘shish maqsadida margin ham qo‘shishingiz mumkin:

First Name Last Name

Misol

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

O‘zingiz sinab ko‘ring »

box-sizing xossasini border-box qilib belgilaganimizga e’tibor bering. Bu padding va oxir-oqibat chegalar elementlarning umumiy kengligi va balandligiga kiritilishini ta’minlaydi. box-sizing xossasi haqida CSS Box Sizing bobimizda ko‘proq o‘qing.

Input chegarasini uslublash

border xossasi chegara o‘lchami va rangini o‘zgartirish uchun ishlatiladi, border-radius xossasi esa yumaloq burchaklar qo‘shish uchun ishlatilishi mumkin:

First Name

Misol

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

O‘zingiz sinab ko‘ring »

Agar faqat pastki chegara xohlasangiz, border-bottom xossasidan foydalaning:

First Name

Misol

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

O‘zingiz sinab ko‘ring »

Input fon rangi va matn rangini uslublash

color.php">background-color xossasi inputga fon rangi qo‘shish uchun, color xossasi esa matn rangini o‘zgartirish uchun ishlatiladi:

Misol

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

O‘zingiz sinab ko‘ring »

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish