CSS'da forma stillash: accent-color, field-sizing va yangi select

Qisqacha: Checkbox, radio va slayderni brend rangiga bo'yash uchun bitta qator yetadi: accent-color: #2f6b3a. Izoh maydoni matnga qarab o'ssin desangiz — field-sizing: content. select ni to'liq bezash uchun yangi rejim bor: appearance: base-select va ochiladigan ro'yxat uchun ::picker(select). Forma elementlarini noldan qayta chizish shart emas — brauzer chizganini kerakli joyidan sozlaysiz.

Bu darsda

• Brauzer o'zi chizadigan forma elementlarining qaysi qismiga CSS yetishini tushuntira olasiz.
• accent-color, color-scheme va caret-color bilan formani brend va qorong'i rejimga moslaysiz.
• appearance: none nima qilishini va qachon xavfli ekanini bilasiz.
• field-sizing: content bilan o'suvchi izoh maydoni yasaysiz.
• appearance: base-select bilan «Bahor»ning vaqt tanlash ro'yxatini bezaysiz va eski brauzer uchun zaxirani o'ylaysiz.

Oldin bilishingiz kerak: Holat pseudo-klasslari, Pseudo-elementlar, Ranglar 3: light-dark va color-scheme, Zamonaviy forma imkoniyatlari, Anchor positioning.

1. Nega bu kerak?

«Bahor»ning bron formasi 05-qismda ancha chiroyli bo'ldi: maydonlar sayt shriftida, xato holati :user-invalid bilan, maydonlar to'rda terilgan. Lekin uchta joy hali "begona":

• "Qayerda o'tirasiz?" radio tugmalari — brauzerning ko'k rangida. Sayt esa yashil.
• "Vaqt" ro'yxati — operatsion tizim chizgan kulrang quti. Uni ochsangiz, Windows'da bir xil, telefonda boshqacha.
• "Qo'shimcha istaklar" maydoni — uch qator. Mehmon uzun yozsa, kichkina oynada aylantirishga majbur.

Ilgari buning yagona yo'li bor edi: brauzer elementini yashirib, uning o'rniga div va rasmlardan "soxta" checkbox yoki ro'yxat yasash. Bu og'ir va xavfli ish edi. Soxta ro'yxat klaviatura bilan ishlamasligi, ekran o'quvchi uni tanimasligi mumkin edi — Zamonaviy forma imkoniyatlari darsida ko'rgandik.

Bugun yo'l boshqa. Mashinani qayta bo'yash uchun uni qismlarga bo'lib, qaytadan yig'ish shart emas. Bo'yoq, g'ildirak qopqog'i va o'rindiq g'ilofi yetadi — motor esa zavodnikicha qoladi. Forma elementlari ham shunday: klaviatura, fokus, ekran o'quvchi — brauzerniki qoladi, ko'rinishini siz sozlaysiz.

2. Brauzer chizadigan elementlar

p yoki div ni CSS to'liq chizadi. Forma elementlarining ko'pi esa boshqacha. Checkbox'dagi belgi, slayderning dumaloq tutqichi, select strelkasi — bularni brauzer va operatsion tizim chizadi. Bunday ko'rinish mahalliy ko'rinish (native appearance) deb ataladi.

CSS ularga uch darajada yetadi:

Qoida: avval eng yuqori qatordagi yengil yo'l. Faqat u yetmasa — pastroqqa tushing. Bu darsda shu tartibda yuramiz:

flowchart TD
  A["Faqat rang kerakmi?"] -->|ha| B["accent-color"]
  A -->|"yo'q"| C["Bezaladigan qismi bormi?"]
  C -->|ha| D["::picker(select) va boshqalar"]
  C -->|"yo'q"| E["appearance: none — o'zingiz chizasiz"]

Nimaga qarang: appearance: none — eng oxirgi qadam. U eng ko'p ish talab qiladi va xato qilish ehtimoli eng katta.

3. Bitta rang bilan: accent-color

3.1 Brend rangidagi belgilar

Tanlash maydonlari darsida "accent-color bitta qator bilan rangini o'zgartiradi" degan edik. Holat pseudo-klasslari darsida esa radio tugma yorlig'ini yashil qilib, "tugmaning o'zini bezash — keyinroq" degandik. Mana o'sha qator:

<style>
  body { font-family: system-ui, sans-serif; }
  .bahor { accent-color: #2f6b3a; }
  fieldset { margin-bottom: 12px; }
  label { margin-inline-end: 12px; }
</style>
<fieldset>
  <legend>Brauzer rangi</legend>
  <input type="radio" id="a1" name="a" checked>
  <label for="a1">Umumiy zal</label>
  <input type="checkbox" id="a2" checked>
  <label for="a2">Bolalar stuli</label>
  <input type="range" aria-label="Achchiqlik">
  <progress value="60" max="100">60%</progress>
</fieldset>
<fieldset class="bahor">
  <legend>«Bahor» rangi</legend>
  <input type="radio" id="b1" name="b" checked>
  <label for="b1">Umumiy zal</label>
  <input type="checkbox" id="b2" checked>
  <label for="b2">Bolalar stuli</label>
  <input type="range" aria-label="Achchiqlik">
  <progress value="60" max="100">60%</progress>
</fieldset>

Nimaga qarang: pastki guruhda radio nuqtasi, checkbox foni, slayder chizig'i va progress to'lqini — hammasi «Bahor» yashilida. Bitta xususiyat to'rt xil elementga ta'sir qildi.

accent-color — forma elementlarining "urg'u" qismi rangi: belgilangan checkbox foni, radio nuqtasi, slayderning to'lgan qismi, progress chizig'i. U meros bo'ladi (Meros), shuning uchun uni fieldset yoki butun form ga yozish yetadi.

3.2 Belgi rangini brauzer o'zi tanlaydi

Checkbox ichidagi "" belgisi rangini siz bermaysiz. Brauzer uni urg'u rangiga qarab o'zi tanlaydi — to'q fonda oq, och fonda qora. Chrome'da tekshirdik: accent-color: #f5d76e (och sariq) berilganda belgi qora chiqdi. Bu — kontrast uchun g'amxo'rlik.

Lekin radio nuqtasi va checkbox atrofi sahifa foni bilan ham ajralib turishi kerak. Accessibility darsidagi talab: interfeys elementlari uchun kamida 3:1. «Bahor» yashili qaymoq fonda 6.1:1 — bemalol.

3.3 Brauzerlarda

Baseline ma'lumotiga ko'ra accent-color Chrome 93, Firefox 92 va Safari 26.2 da bor, lekin Android'dagi Chrome ro'yxatda ko'rsatilmagan — shuning uchun u rasman Baseline emas. Ishlamagan joyda brauzerning standart rangi qoladi, forma baribir ishlaydi. Bu xavfsiz qo'shimcha — tavakkal qilmay ishlatavering.

Tekshirib ko'ring: accent-color ni har bir input ga alohida yozish kerakmi?

4. Qorong'i rejim va kursor

4.1 color-scheme

Ranglar 3 darsida color-scheme: light dark ni ko'rgan edik. Forma uchun uning ma'nosi katta: brauzer maydonlar fonini, chegarasini, skrollbar va hatto sana tanlagichni ham qorong'i variantda chizadi. Buni o'zingiz qilish uchun o'nlab qoida kerak bo'lardi.

Yakuniy loyiha darsida portfolio'da buni allaqachon ko'rgansiz: qorong'i blokdagi maydon ham qorong'i edi, garchi unga rang bermagan bo'lsak ham. Qoida bitta: sahifa ikkala rejimni qo'llasa, :root { color-scheme: light dark; } albatta bo'lsin.

4.2 caret-color

caret-color — matn maydonidagi miltillovchi kursor rangi. Odatda u matn rangida. Brend rangiga o'zgartirish — kichik, lekin yoqimli detal:

input,
textarea {
  caret-color: #2f6b3a;
}

Kursor faqat maydon fokusda bo'lganda ko'rinadi. Skrinshotda uni ko'rsatib bo'lmaydi — o'zingiz sinab ko'ring. caret-color 2020-yil yanvaridan hamma asosiy brauzerlarda bor (Baseline, keng tarqalgan). Kursor fonda yaxshi ko'rinsin: och rang och fonda yo'qolib qoladi.

Tekshirib ko'ring: Sayt qorong'i rejimda, lekin forma maydonlari oppoq bo'lib qoldi. Qaysi bitta qator yetishmayapti?

5. appearance: brauzer chizganini o'chirish

5.1 appearance: none

appearance — element brauzerning mahalliy ko'rinishida chizilsinmi, yo'qmi. appearance: none — "mahalliy ko'rinishni o'chir, men o'zim chizaman". Pseudo-elementlar darsida meter ni bezashda aytgan edik: Firefox va Safari'da ::-webkit-meter-* va ::-moz-meter-bar ishlashi uchun meter ga appearance: none kerak. Sabab shu — avval mahalliy ko'rinishni o'chirish kerak.

select uchun bu eski, hamma joyda ishlaydigan usul. Strelkani o'chirib, o'zimiznikini fon rasmi qilib qo'yamiz:

<style>
  body { font-family: system-ui, sans-serif; }
  select {
    appearance: none;
    font: inherit;
    padding: 8px 40px 8px 12px;
    border: 2px solid #2f6b3a;
    border-radius: 8px;
    background-color: #fffaf0;
    background-image:
      linear-gradient(45deg, transparent 50%, #2f6b3a 50%),
      linear-gradient(135deg, #2f6b3a 50%, transparent 50%);
    background-position:
      calc(100% - 22px) 55%,
      calc(100% - 16px) 55%;
    background-size: 6px 6px;
    background-repeat: no-repeat;
  }
</style>
<label for="vaqt">Vaqt</label>
<select id="vaqt">
  <option>Vaqtni tanlang</option>
  <option>12:00</option>
  <option>18:00</option>
</select>

Nimaga qarang: yopiq select yashil ramkali, qaymoq fonli va o'ngda pastga qaragan yashil uchburchak — kulrang tizim qutisi yo'q. Uchburchak — ikkita kichik gradient: har biri 6×6 piksellik katakning qiya yarmini bo'yaydi, yonma-yon turib bitta uchburchak hosil qiladi. Rasm fayli kerak emas. Lekin ro'yxatni ochsangiz, u baribir operatsion tizimniki. Bu usulning chegarasi shu.

appearance 2022-yil martidan hamma asosiy brauzerlarda bor, 2024-yil sentabridan Baseline "keng tarqalgan". Eski saytlarda -webkit-appearance ni ham uchratasiz — bugun prefiks shart emas.

5.2 Tuzoq: checkbox yo'qolib qoladi

appearance: none ni checkbox yoki radio'ga yozsangiz, u umuman ko'rinmay qoladi. Chrome'da o'lchadik: belgilangan checkbox 0×0 piksel bo'lib qoldi. Endi hamma narsani — ramka, o'lcham, belgilangan holat, fokus — o'zingiz chizishingiz kerak.

Bu yo'lni tanlashdan oldin o'zingizdan so'rang: accent-color yetmaydimi? Ko'pincha yetadi. To'liq maxsus checkbox, radio va "switch" tugmani qanday xavfsiz chizish — Forma komponentlari darsida.

Tekshirib ko'ring: Dizayner "radio tugmalar yashil bo'lsin" dedi. Stajyor appearance: none yozib, ::before bilan doira chizmoqchi. Siz nima taklif qilasiz?

6. field-sizing: matnga qarab o'sadigan maydon

6.1 Muammo va yechim

Zamonaviy forma imkoniyatlari darsida «Bahor» izoh maydoni haqida gaplashgan edik: rows="3", uzun matn yozilsa, kichkina oynada aylantirish paydo bo'ladi. Yechim — field-sizing: content: maydon o'lchami ichidagi matnga qarab hisoblanadi.

<style>
  body { font-family: system-ui, sans-serif; }
  textarea {
    display: block;
    width: 260px;
    margin-bottom: 12px;
    font: inherit;
    padding: 8px;
  }
  .osadi {
    field-sizing: content;
    min-block-size: 3lh;
    max-block-size: 8lh;
  }
</style>
<label for="i1">Oddiy (rows="3")</label>
<textarea id="i1" rows="3">Tug'ilgan kun.
Bolalar stuli kerak.
Stol derazaga yaqin bo'lsin.
Tort o'zimiz bilan.
Soat 19:00 da sham.</textarea>
<label for="i2">field-sizing: content</label>
<textarea id="i2" class="osadi">Tug'ilgan kun.
Bolalar stuli kerak.
Stol derazaga yaqin bo'lsin.
Tort o'zimiz bilan.
Soat 19:00 da sham.</textarea>

Nimaga qarang: matn bir xil — besh qator. Tepadagi maydon uch qator balandlikda, qolgani aylantirish ortida yashiringan. Pastdagisi beshala qatorni to'liq ko'rsatadi. "Tahrirlab ko'rish" da pastki maydonga yana qator qo'shing — u o'sadi.

6.2 Chegaralar: min-block-size va max-block-size

field-sizing: content bilan bo'sh maydon juda kichrayib ketadi — bitta qatorcha. Cheksiz o'sishi ham yomon: mehmon katta matn yopishtirsa, forma ekrandan chiqib ketadi. Shuning uchun ikki chegara:

• min-block-size: 3lh — kamida 3 qator. lh — bitta qator balandligi (O'lcham birliklari).
• max-block-size: 8lh — ko'pi bilan 8 qator, keyin aylantirish paydo bo'ladi.

Chrome'da o'lchadik (shrift 16 piksel, padding 8 piksel): bo'sh maydon 81 piksel — rows="3" bilan bir xil. Besh qator matn bilan — 123 piksel. O'n bir qator bilan esa 186 pikseldan oshmadi: 8 qator chegarasi ishladi.

field-sizing faqat textarea uchun emas. input ham matn eniga qarab kengayadi — qisqa kod yoki raqam maydonlari uchun qulay. Bunda ham min-inline-size bering, bo'sh maydon ingichka ip bo'lib qolmasin.

6.3 Brauzerlarda

field-sizing Baseline ma'lumotiga ko'ra 2026-yil 16-iyundan Baseline ("yangi"): Chrome 123, Safari 26.2 va Firefox 152. Eski brauzerda xususiyat tashlanadi va rows="3" dagi oddiy maydon qoladi — hech narsa buzilmaydi. Shuning uchun HTML'dagi rows ni o'chirmang: u zaxira.

Tekshirib ko'ring: field-sizing: content bor, lekin min-block-size yo'q. Bo'sh izoh maydoni qanday ko'rinadi va bu nega yomon?

7. Fayl tugmasi, namuna matn va xato holati

Uchalasini oldingi darslarda boshlagan edik — bu yerda faqat qo'shimchalar.

• ::file-selector-button (Pseudo-elementlar) — tugma bo'lgani uchun unga holatlar ham ishlaydi: input::file-selector-button:hover. Sichqoncha ustiga kelganda rang biroz to'qlashsin — Ranglar 3 dagi nisbiy rang bilan.
• ::placeholder — namuna matn ham matn: 4.5:1 kontrast. U yorliq o'rnini bosmaydi.
• :user-invalid (Holat pseudo-klasslari) — xato faqat mehmon maydon bilan ishlab bo'lgach. accent-color bilan birga: xato holatda checkbox'ning o'zi ham qizg'ish bo'lishi mumkin — input:user-invalid { accent-color: #b4461a; }.

input::file-selector-button {
  border: 0;
  border-radius: 0.5rem;
  padding: 0.5em 1em;
  background-color: #2f6b3a;
  color: #fffaf0;
}

@media (hover: hover) {
  input::file-selector-button:hover {
    background-color: oklch(from #2f6b3a calc(l - 0.08) c h);
  }
}

@media (hover: hover) — telefonda "yopishib qoladigan" hover bo'lmasin (Mobil tuzoqlar).

8. Yangi select: appearance: base-select

8.1 Va'dani bajaramiz

Zamonaviy forma imkoniyatlari darsida «Bahor» bron formasining vaqt maydonini yangi HTML bilan yozgan edik: select ichida button va selectedcontent, har option ichida span class="bosh-stol". O'shanda "hozir bu kodni tushunish shart emas" deb, bitta CSS qoidasini ko'rsatgan edik. Endi to'liq tushunamiz.

<style>
  body {
    font-family: system-ui, sans-serif;
    background: #fffaf0;
    color: #1f2a24;
  }
  select,
  ::picker(select) {
    appearance: base-select;
  }
  select {
    font: inherit;
    padding: 0.5em 0.75em;
    border: 2px solid #2f6b3a;
    border-radius: 8px;
    background-color: #fffaf0;
  }
  select::picker-icon {
    color: #2f6b3a;
  }
  ::picker(select) {
    border: 2px solid #2f6b3a;
    border-radius: 8px;
    margin-block-start: 4px;
  }
  option:checked {
    background-color: #2f6b3a;
    color: #fffaf0;
  }
  .bosh-stol {
    color: #5b6660;
    font-size: 0.875em;
  }
  option:checked .bosh-stol {
    color: inherit;
  }
</style>
<label for="vaqt">Vaqt</label>
<select id="vaqt" name="vaqt">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="">Vaqtni tanlang</option>
  <option value="12:00">
    12:00 <span class="bosh-stol">— 6 ta stol bo'sh</span>
  </option>
  <option value="18:00">
    18:00 <span class="bosh-stol">— 2 ta stol bo'sh</span>
  </option>
  <option value="20:00" disabled>
    20:00 <span class="bosh-stol">— joy yo'q</span>
  </option>
</select>

Ro'yxatni oching. Nimaga qarang: yopiq holatda — yashil ramkali tugma va yashil strelka. Ochilgan ro'yxat ham yashil ramkada, tugma ostida. Tanlangan vaqt yashil fonda, oldida "" belgisi. "Bo'sh stol" yozuvlari kulrang va kichikroq. disabled 20:00 xira — uni tanlab bo'lmaydi. Vaqtni tanlasangiz, u yozuvi bilan birga tugmada ko'rinadi — buni selectedcontent qiladi.

8.2 Qatorma-qator

• appearance: base-select — select ni yangi, bezaladigan rejimga o'tkazadi. U ikki joyga yoziladi: select ning o'ziga va ro'yxatga. Faqat select ga yozsangiz, ro'yxat eski rejimda qoladi.
• ::picker(select) — ochiladigan ro'yxat. U popover kabi top layer'da chiqadi (Top layer).
• ::picker-icon — yopiq tugmadagi strelka. Uni bo'yash, o'lchamini o'zgartirish, hatto ochilganda burish mumkin: select:open::picker-icon { rotate: 180deg; } (2D transformlar).
• option:checked — tanlangan variant. Uning oldidagi belgi — option::checkmark; content bilan uni boshqa belgiga almashtirsa bo'ladi.
• button — select ning birinchi bolasi. 04-qismda "endi uni o'zingiz yozasiz va ichini bezay olasiz" degan edik: u oddiy button kabi stillanadi — padding, gap, ichiga ikonka.

8.3 Tuzoq: tanlangan qatordagi kulrang yozuv

option:checked .bosh-stol { color: inherit; } qatori bejiz emas. Usiz Chrome'da tanlangan qatorda kulrang #5b6660 yozuv yashil fonda qolib ketdi — deyarli o'qib bo'lmaydi. Qatorning foni o'zgarsa, ichidagi hamma matn rangini ham tekshiring.

8.4 Ro'yxat qayerda ochiladi — anchor positioning

Ro'yxat qanday qilib tugma ostida chiqdi? Anchor positioning darsidagi yashirin langar: select — langar, ::picker(select) — bog'langan element. Brauzer unga position-area va zaxira joyni o'zi bergan: pastda joy bo'lmasa, ro'yxat tepaga o'tadi. Joyini o'zingiz ham o'zgartira olasiz:

::picker(select) {
  position-area: top span-right;
  margin-block-end: 4px;
}

Chrome'da tekshirdik: ro'yxat tugma tepasida, chap chetlari tekis holda ochildi. O'tgan dars bilimi shu yerda ham ishladi.

8.5 Brauzerlarda va zaxira

Baseline ma'lumotiga ko'ra stillanadigan select Baseline emas: Chrome 135 va Safari 27 da bor, Firefox'da hali yo'q. Bu yerda progressive enhancement o'zi ishlaydi:

• Firefox appearance: base-select ni tanimaydi va tashlaydi — oddiy select qoladi.
• button va selectedcontent e'tiborsiz qoladi, option ichidagi span matni esa o'qiladi: "12:00 — 6 ta stol bo'sh". Chiziqcha aynan shu uchun yozilgan edi.
• select ning o'ziga yozilgan ramka va fon baribir qo'llanadi.

Ya'ni eski brauzerda ham forma chiroyli va ishlaydi. Faqat ochiladigan ro'yxat tizimniki bo'ladi.

Tekshirib ko'ring: Stajyor faqat select { appearance: base-select; } yozdi. Tugma yangi ko'rinishda, lekin ochilgan ro'yxat eskicha. Nima yetishmayapti?

9. Slayder: input type="range"

Slayderning ikki qismi bor: yo'lak (track) va tutqich (thumb). Rangini o'zgartirish uchun accent-color yetadi. Shaklini — kattaroq tutqich, ingichka yo'lak — o'zgartirish uchun esa standart yo'l hali yo'q. Har dvigatelning o'z nostandart pseudo-elementi bor:

<style>
  body { font-family: system-ui, sans-serif; }
  input[type="range"] {
    appearance: none;
    width: 240px;
    height: 6px;
    border-radius: 3px;
    background: #c9d6cf;
  }
  input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #2f6b3a;
  }
  input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 50%;
    background: #2f6b3a;
  }
</style>
<label for="achchiq">Achchiqlik darajasi</label>
<input type="range" id="achchiq" min="0" max="3" value="1">

Nimaga qarang: ingichka och kulrang yo'lak va katta yashil dumaloq tutqich. 24 piksellik tutqich barmoq bilan ushlashga qulay (Chegara va soyalar darsidagi border-radius: 50% doira qildi).

Pseudo-elementlar darsidagi qoida shu yerda ham: -webkit- va -moz- qoidalari alohida yoziladi. Bitta ro'yxatda birlashtirsangiz, Chrome -moz- ni tanimaydi va butun qoidani tashlaydi. Firefox'ni biz tekshira olmadik — ::-moz-range-thumb qoidasi MDN hujjatiga ko'ra yozildi.

appearance: none dan keyin fokus halqasi saqlanadimi? Tekshiring: Tab bilan slayderga keling. Halqa ko'rinmasa — :focus-visible qoidasini qo'shing (Holat pseudo-klasslari).

Tekshirib ko'ring: Slayder faqat «Bahor» yashilida bo'lsin, shakli o'zgarmasin. Yuqoridagi uzun kod kerakmi?

10. Ko'p uchraydigan xatolar

10.1 iPhone'da forma "kattalashib ketadi"

head anatomiyasi darsida va'da qilingan va Mobil tuzoqlar darsida hal qilingan tuzoq: maydon shrifti 16 pikseldan kichik bo'lsa, iPhone'dagi Safari fokusda sahifani kattalashtiradi. Formani bezayotganda font-size: 14px yozib yubormang. Tuzatish: font: inherit — maydon sahifa matnining 16 pikselini oladi. Zoom'ni user-scalable=no bilan o'chirish — yechim emas.

10.2 fieldset subgrid bo'lmaydi

Formani grid qilib, har fieldset ni grid-template-columns: subgrid qilmoqchisiz — ikkala guruhdagi yorliqlar bitta ustunda tursin. subgrid darsida ko'rganmiz: Chrome 154 da bu ishlamaydi. Biz ham qayta tekshirdik: yorliq va maydon bir ustunda ustma-ust tushdi. Tuzatish: har fieldset ni o'zi grid qiling, yorliq ustuniga ikkala guruhda bir xil qat'iy en bering.

10.3 Checkbox "yo'qoldi"

input { appearance: none; } — umumiy selektor bilan yozildi. Checkbox va radio'lar 0×0 bo'lib yo'qoldi. Tuzatish: appearance ni faqat kerakli turga yozing: select, input[type="range"].

10.4 Ro'yxat ochilganda eskicha

::picker(select) ga appearance: base-select yozilmagan. Tuzatish: qoidada ikkalasi birga.

10.5 Rang faqat rangda

Xato holatda faqat ramka qizg'ish. Rangni ajratmaydigan mehmon farqni sezmaydi. Tuzatish: xato matni va aria-describedby (Qulay forma); rang — qo'shimcha.

11. Mashqlar

Mashqlarni kurs/mashqlar/06/ papkasida bajaring.

1-mashq (oson): Brend rangidagi joy tanlovi

«Bahor» bron formasidagi "Qayerda o'tirasiz?" fieldset ida uchta radio tugma bor. Ular «Bahor» yashilida bo'lsin, bitta qoida bilan.

Ishora: xususiyat meros bo'ladi — uni fieldset ga yoki butun form ga yozing.

form {
  accent-color: #2f6b3a;
}

2-mashq (o'rta): O'suvchi izoh maydoni

«Bahor» formasidagi "Qo'shimcha istaklar" maydoni (rows="3", maxlength="200"):

1. Matnga qarab o'ssin.
2. Bo'shida kamida 3 qator, ko'pi bilan 6 qator balandlikda bo'lsin.
3. Eski brauzerda ham 3 qatorli maydon qolsin.
4. Kursor brend rangida bo'lsin.

Ishora: «field-sizing» bo'limi. 3-band uchun HTML'da nimani o'chirmaslik kerak?

textarea {
  field-sizing: content;
  min-block-size: 3lh;
  max-block-size: 6lh;
  caret-color: #2f6b3a;
}

3-mashq (qiyin): Stajyorning select'i

Stajyor «Bahor» vaqt ro'yxatini bezadi:

select {
  appearance: base-select;
  font-size: 14px;
}

option:checked {
  background: #2f6b3a;
}

.bosh-stol {
  color: #5b6660;
}

input {
  appearance: none;
}

Shikoyatlar: (1) ochilgan ro'yxat eskicha; (2) iPhone'da maydonni bosganda sahifa kattalashadi; (3) tanlangan qatorda matn deyarli ko'rinmaydi; (4) bron formasidagi radio tugmalar yo'qolgan.

Har muammoning sababini toping va CSS'ni tuzating.

Ishora: to'rt muammo — to'rt bo'lim: «Qatorma-qator», «Ko'p uchraydigan xatolar» dagi iPhone, «Tuzoq: tanlangan qatordagi kulrang yozuv», «Tuzoq: checkbox yo'qolib qoladi».

select,
::picker(select) {
  appearance: base-select;
}

select {
  font: inherit;
}

option:checked {
  background-color: #2f6b3a;
  color: #fffaf0;
}

.bosh-stol {
  color: #5b6660;
}

option:checked .bosh-stol {
  color: inherit;
}

4-mashq: Portfolio qadami — aloqa formasi brend rangida

Portfolio'ning "Aloqa" sahifasidagi forma: ism, email, "Qaysi mavzuda?" radio guruhi va rows="5" li "Xabar" maydoni. Yakuniy loyiha darsida unga textarea { min-block-size: 8rem; } yozilgan edi.

1. Radio tugmalar portfolio brend rangida bo'lsin — qorong'i rejimda ham.
2. Xabar maydoni matnga qarab o'ssin: kamida hozirgi 8rem, ko'pi bilan 20 qator.
3. Matn maydonlarida kursor brend rangida bo'lsin.
4. Qorong'i rejimni yoqib tekshiring: radio va kursor ko'rinyaptimi?

Ishora: rang — --rang-asosiy o'zgaruvchisidan; u qorong'i rejimda o'zi almashadi (Yakuniy loyiha dagi @media (prefers-color-scheme: dark)).

/* Brend rangidagi radio va kursor (Forma elementlarini zamonaviy
   stillash darsi) */
form {
  accent-color: var(--rang-asosiy);
}

input:not([type="radio"]),
textarea {
  padding: 0.5em;
  caret-color: var(--rang-asosiy);
}

/* Xabar maydoni matnga qarab o'sadi; eski brauzerda rows="5" */
textarea {
  field-sizing: content;
  min-block-size: 8rem;
  max-block-size: 20lh;
}

12. Real ishda

• Dizayn tizimlari — GitHub, Shopify, Gov.uk kabi katta tizimlarda forma elementlari birinchi bo'lib bezaladi, chunki ular har sahifada bor. Bugun ko'p tizimlar accent-color va color-scheme dan boshlaydi, appearance: none ni faqat haqiqatan kerak joyda ishlatadi.
• Ochiladigan ro'yxatlar — ko'p yillar React Select, Headless UI kabi kutubxonalar bilan yasalgan (kursda keyinroq ko'ramiz, hozir bilish shart emas). base-select hamma brauzerga yetib borganda ularning ko'pi kerak bo'lmay qoladi.
• Chat va izoh maydonlari — Telegram Web, ChatGPT kabi ilovalardagi o'suvchi xabar maydoni ilgari JavaScript bilan o'lchanardi. field-sizing buni bitta qatorga aylantirdi.
• Intervyuda so'raladi: "Checkbox rangini qanday o'zgartirasiz?", "appearance: none ning xavfi nimada?", "Maxsus select'ni accessible qilish nega qiyin edi?". Endi uchalasiga ham javob bera olasiz.

Xulosa

• Forma elementlarini brauzer chizadi; CSS ularga umumiy xususiyatlar, maxsus xususiyatlar va qismlar orqali yetadi.
• accent-color — checkbox, radio, slayder va progress rangi; color-scheme — qorong'i rejimdagi maydonlar; caret-color — kursor.
• appearance: none mahalliy ko'rinishni o'chiradi: select uchun foydali, checkbox'ni esa yo'q qiladi.
• field-sizing: content + min-block-size/max-block-size — o'suvchi maydon; rows zaxira bo'lib qoladi.
• appearance: base-select select ga ham, ::picker(select) ga ham; Firefox'da hozircha oddiy select qoladi.
• Slayder shakli uchun -webkit- va -moz- pseudo-elementlari — alohida qoidalarda.

Keyingi dars: Filterlar va aralashtirish rejimlari — rasm muharriridagi xiralashtirish, oq-qora va "shisha" effektlarini CSS bilan qilamiz.

Manbalar

• MDN: "accent-color", "field-sizing", "appearance", "caret-color", "::picker()", "Customizable select elements", "Styling web forms" — developer.mozilla.org
• web-features: "accent-color", "field-sizing", "customizable-select" — web-platform-dx.github.io/web-features-explorer
• Chrome for Developers: "The customizable select" — developer.chrome.com
• WHATWG HTML: "The select element" — html.spec.whatwg.org