‏چک‌باکس سفارشی، تا وقتی ::checkmark برسه

حالا که سفارشی کردن بهتر شده، اندی بل می‌گه آدم ناخودآگاه به بقیه‌ی فیلدهای فرم هم چپ‌چپ نگاه می‌کنه. چک‌باکس جزو همون‌هاست: جدا از accent-color عملاً هیچ راه درست‌وحسابی برای عوض کردن ظاهرش نداری. اسپک CSS Forms شبه‌المان ::checkmark رو تعریف کرده، یعنی همون نشانگری که می‌گه آیتم تیک خورده یا نه، و کنارش appearance: base هم قراره بیاد. ولی به گفته‌ی نویسنده فعلاً هیچ مرورگری روی این‌ها کار نمی‌کنه.

نویسنده می‌گه همیشه باید از مارک‌آپ خوب شروع کرد. ساختار پیشنهادیش یه والده که با for و id هم به اینپوت وصل شده، داخلش یه span نقش جعبه‌ی تیک رو داره و خود input و آیکن SVG داخل همون span می‌شینن، و یه span دیگه هم متن لیبله. از span استفاده شده چون داخل label فقط phrasing content مجازه. روی SVG هم aria-hidden="true" گذاشته تا فناوری‌های کمکی این المان صرفاً تصویری رو نادیده بگیرن.

برای چیدمان از فلکس استفاده می‌شه با align-items: baseline به جای center. دلیلش اینه که وقتی ویوپورت کوچیک می‌شه و متن لیبل به خط بعد می‌ره، هم‌ترازی عمودی بد به نظر می‌رسه. نویسنده text-wrap: balance رو هم اضافه کرده تا خط‌های لیبل هم‌اندازه‌تر بشکنن و لبه‌شون یکدست بمونه، که برای متن‌های کوتاه فرم بیشتر به چشم میاد.

قلب کار روی خود اینپوته. با appearance: none و پوزیشن absolute، المان از نظر بصری از سر راه کنار می‌ره ولی همچنان توی صفحه هست، فوکوس می‌گیره و حلقه‌ی فوکوس خودشو نشون می‌ده. همین چیزیه که این الگو رو از ترفندهای قدیمی «چک‌باکس رو با display: none قایم کن» جدا می‌کنه:

.checkbox input {
  margin: 0;
  width: 100%;
  height: 100%;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0.2em;
}

جعبه‌ی دورش position: relative می‌گیره تا اینپوت داخلش بمونه، و با transform: translateY(0.75ex) سر جاش می‌شینه. نویسنده می‌گه این یه عدد جادوییه ولی چون واحدش ex ـه با اندازه‌ی فونت والد خوب اسکیل می‌شه. تیک هم وقتی نشون داده می‌شه که اینپوت چک شده باشه:

.checkbox__box:has(input:checked) {
  background: white;
}

.checkbox__box input:checked + svg {
  display: block;
}

همین الگو برای رادیو باتن هم جواب می‌ده، فقط به جای تیک یه آیکن دایره می‌ذاری. نکته‌ی آخر اینه که جدا از قانون‌های transform، همه‌ی اندازه‌ها با واحد em نوشته شدن. یعنی برای بزرگ یا کوچیک کردن کل کامپوننت فقط کافیه font-size رو روی .checkbox عوض کنی و هیچ چیز دیگه‌ای لازم نیست دست بخوره.

نکات کلیدی:

• ::checkmark تو اسپک CSS Forms level 1 تعریف شده ولی به گفته‌ی نویسنده هیچ مرورگری فعلاً پیاده‌سازیش نمی‌کنه.
• appearance: none به علاوه‌ی پوزیشن absolute اینپوت رو بصری کنار می‌ذاره ولی فوکوس‌پذیریشو حفظ می‌کنه.
• هم‌ترازی baseline به جای center برای وقتیه که متن لیبل تو ویوپورت کوچیک می‌شکنه.
• حالت چک‌شده با :has(input:checked) و سلکتور برادر بعدی + مدیریت می‌شه.
• چون اندازه‌ها با em نوشته شدن، عوض کردن font-size روی .checkbox کل کامپوننت رو اسکیل می‌کنه.