مولّد مربعات اختيار CSS

ماذا يفعل CSS المولّد؟

تُطبَّق القاعدة مباشرة على عنصر الإدخال باستخدام appearance: none، التي تزيل المظهر الافتراضي حتى يمكن تنسيق المربع:

.checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}

عند تحديد الخانة، يمتلئ المربع باللون المختار وتظهر علامة صح بيضاء مرسومة بـ CSS:

.checkbox:checked {
  background: #10b981;
  border-color: #10b981;
}
.checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

لماذا عنصر إدخال أصلي؟

لا يستبدل النمط العنصر أبدا بعنصر div: يحتفظ <input type="checkbox"> الحقيقي بالتفعيل من لوحة المفاتيح ودعم قارئات الشاشة وإرسال النموذج. تغيّر appearance: none المظهر فقط. إذا كنت تحتاج دعم إصدارات Safari القديمة، أضف -webkit-appearance: none إلى القاعدة.

التركيز ومرور المؤشر

تتضمن القاعدة المولّدة انتقالا لونيا سلسا، لكن لا توجد أنماط لمرور المؤشر أو التركيز. أضف قواعدك الخاصة لـ :hover و :focus-visible حتى يرى مستخدمو لوحة المفاتيح موضع التركيز دائما، مثلا بحدود ملونة حول المربع.

علامة الصح

علامة الصح خط أبيض صغير مائل بزاوية 45 درجة. إذا احتجت لونا آخر أو خطا أرفع أو أثخن، فعدّل قيمتي border و border-width في قاعدة ::after.