CSS Checkbox Generator

ما هي هذه الأداة؟

تختلف مربعات الاختيار الافتراضية في المتصفح من متصفح لآخر، ومن الصعب إعادة تصميمها مباشرة لأن مظهرها المدمج يُرسم بواسطة نظام التشغيل وليس عبر CSS البسيط. الحل المعتاد هو إخفاء مربع الاختيار الأصلي بصريًا وتصميم عنصر شقيق بدلاً منه، يعتمد على حالة :checked الخاصة بمربع الاختيار — يبقى الحقل يعمل بالكامل ويظل قابلاً للوصول، ولا يتغير سوى مظهره.

تبني هذه الأداة هذا النمط لثلاثة أنماط شائعة لمربعات الاختيار: مربع مستدير الحواف بعلامة صح متحركة، ومفتاح تبديل منزلق على طراز iOS، ودائرة ممتلئة (تشبه زر الاختيار). انقر على مربع الاختيار في المعاينة لرؤية الحالة المحددة، واضبط الحجم واللون المميز، ثم انسخ كود CSS.

المصدر: Selectors Level 4, W3C — المواصفة التي تعرّف الفئة الزائفة :checked التي تعتمد عليها هذه التقنية.

لماذا تستخدمها؟

• معاينة حية وقابلة للنقر — بدّل حالة مربع الاختيار لترى بالضبط كيف تبدو الحالتان المحددة وغير المحددة.
• ثلاثة أنماط مميزة وشائعة الاستخدام في أداة واحدة: مربع بعلامة صح، ومفتاح تبديل، ودائرة ممتلئة.
• يبقى العنصر الأساسي عنصر <input type="checkbox"> حقيقيًا، لذا يستمر التنقل بلوحة المفاتيح وإرسال النماذج وقارئات الشاشة في العمل بشكل طبيعي.
• حجم ولون مميز قابلان للتعديل، يُدرجان مباشرة كقيم في كود CSS بدلاً من تركهما كمتغيرات يجب تعبئتها.
• لا حاجة إلى خط أيقونات أو ملف SVG أو صورة — علامة الصح والمقبض تُرسمان باستخدام حدود CSS بسيطة وعناصر زائفة (pseudo-elements).
• مجانية، تعمل في متصفحك، دون الحاجة إلى تسجيل.

كيفية الاستخدام

1. اختر نمطًا: علامة صح مستديرة، أو مفتاح تبديل، أو دائرة ممتلئة.
2. اسحب شريط تمرير الحجم لتكبير مربع الاختيار أو تصغيره.
3. اختر لونًا مميزًا — سيصبح هذا لون الخلفية والحدود في حالة التحديد.
4. انقر على مربع الاختيار في لوحة المعاينة للتأكد من أن الحالتين المحددة وغير المحددة تبدوان صحيحتين.
5. انسخ كود CSS المُنشأ إلى ورقة الأنماط الخاصة بك واستخدمه على أي <input type="checkbox"> ملفوف بنفس طريقة ترميز المعاينة.

مثال

الإدخال

Style: rounded checkmark · Size: 24px · Color: orange

الناتج

.css-checkbox .mark {
  width: 24px;
  height: 24px;
  border: 2px solid #f97316;
  border-radius: 5px;
}

.css-checkbox input:checked + .mark {
  background: #f97316;
}

حقل الإدخال الخاص بمربع الاختيار مخفي بصريًا؛ والمربع المرئي هو عنصر <span> شقيق يُصمَّم باستخدام حالة :checked الخاصة بالحقل، مع حدّ صغير مُدار يُرسم كعلامة صح بمجرد التحديد.

لماذا نُخفي مربع الاختيار الأصلي بدلاً من إزالته

قد يبدو من المغري تجاوز عنصر <input> الحقيقي وبناء مربع اختيار بالكامل من <div> مُصمَّم مع معالج نقر، لكن هذا يفقدك دعم لوحة المفاتيح وإرسال النماذج ودلالات قارئ الشاشة مجانًا. النمط الذي تولّده هذه الأداة يحافظ على حقل مربع الاختيار الحقيقي في الترميز — فقط مخفي بصريًا باستخدام opacity: 0 وموضوع بشكل مختلف — بحيث يظل المتصفح يعامله كمربع اختيار حقيقي في كل ما يهم، بينما يتولى عنصر شقيق التصميم المرئي.

الأنماط الثلاثة في لمحة

• علامة صح مستديرة: نمط مربع مع علامة صح مألوف، وهو الأكثر شيوعًا لحقول النماذج ومربعات الموافقة وقوائم الاختيار المتعدد.
• مفتاح تبديل: يُقرأ كإعداد تشغيل/إيقاف فوري أكثر من كونه حقل نموذج — الأنسب لشاشات التفضيلات والإعدادات وليس قوائم مربعات الاختيار.
• دائرة ممتلئة: مظهر بسيط يشبه زر الاختيار (radio button)، مفيد عندما يكون المربع ثقيلاً بصريًا مقابل عناصر واجهة مستديرة قريبة منه.

مطابقته مع بقية واجهة المستخدم

اللون المميز المُولَّد يؤثر فقط على حالة التحديد — اختر أي لون يمثل علامتك التجارية أو لون أزرارك بحيث يبدو مربع الاختيار متناسقًا مع بقية الصفحة. اقرنه مع نفس قيمة border-radius المستخدمة في أماكن أخرى من الواجهة للحصول على مظهر أكثر تماسكًا.

→ Border Radius Generator

الأسئلة الشائعة