كيفية تخصيص مربعات الاختيار وأزرار الراديو باستخدام CSS

يلعب التخصيص دورًا مهمًا في إنشاء واجهات مستخدم عبر الإنترنت جذابة بصريًا. تعد مربعات الاختيار وأزرار الاختيار من عناصر الإدخال الشائعة ، وتوفر فرصة رائعة للتخصيص.

بفضل قوة CSS ، يمكنك تحويل عناصر النموذج الافتراضية هذه إلى مكونات أنيقة تتوافق تمامًا مع جماليات موقع الويب الخاص بك. يمكنك تصميمها لتحسين تجربة المستخدم وجعل النماذج الخاصة بك أكثر جاذبية.

فهم مربعات الاختيار وأزرار الراديو

مربعات الاختيار هي عناصر واجهة المستخدم التي تتيح للمستخدمين تحديد خيار واحد أو أكثر من قائمة معينة بشكل مستقل. تعرضها المستعرضات عادةً كمربعات صغيرة مربعة يمكنك تحديدها أو إلغاء تحديدها.

وفي الوقت نفسه ، فإن أزرار الاختيار مخصصة للتحديد الذي يتضمن اختيارًا واحدًا من مجموعة من الخيارات. يتم عرضها كأزرار دائرية صغيرة بدائرة مملوءة بجانب التحديد الحالي. مثل مربعات الاختيار ، تعتبر أزرار الاختيار ضرورية لـ إنشاء نماذج في HTML.

لإنشاء هذه العناصر في HTML ، استخدم ملف علامة مع يكتب تعيين السمة إلى "مربع الاختيار" أو "الراديو" على التوالي. يجب أن تحتوي كل علامة على سمة معرف فريد للتصنيف ، وما يقابلها يجب أن تحتوي العلامة على

ل تطابق السمة معرّف العلامة. هذا الارتباط بين المدخلات والتسمية أمر بالغ الأهمية لإمكانية الوصول.

<مدخليكتب="مربع الاختيار"بطاقة تعريف="checkbox1">
<ملصقل="checkbox1">خانة الاختيار 1ملصق>
<مدخليكتب="مذياع"بطاقة تعريف="راديو 1"اسم="radioGroup">
<ملصقل="راديو 1">راديو 1ملصق>

تقنيات التصميم الأساسية

هناك العديد نصائح وحيل أساسية لـ CSS يمكنك استخدامها لتحسين مظهر مربعات الاختيار وأزرار الاختيار. على سبيل المثال ، يمكنك تعديل حجم عناصر النموذج هذه ولونها وشكلها وموضعها.

لتبدأ ، اضبط أبعاد مربعات الاختيار وأزرار الاختيار من خلال معالجة ملفات عرض و ارتفاع ملكيات. يتيح لك ذلك تكبيرها أو تصغيرها بناءً على متطلبات التصميم الخاصة بك. يمكنك أيضًا تغيير ألوانها باستخدام تنسيق لون الخلفية و حدود الخصائص ، بحيث تتطابق مع مخطط ألوان موقع الويب الخاص بك.

يمكنك الذهاب إلى أبعد من ذلك باستخدام العناصر الزائفة والفئات الزائفة لـ CSS. تتيح لك هذه إضافة عناصر زخرفية وتعديل مظهر مربعات الاختيار وأزرار الاختيار بناءً على حالتها.

على سبيل المثال ، ملف :التحقق تسمح لك الفئة الزائفة بتصميم الحالة المحددة ، بينما :يحوم و :ركز يمكن للفئات الزائفة تقديم ملاحظات مرئية عندما يتفاعل المستخدمون مع هذه العناصر.

مدخل[النوع ="مربع الاختيار"]:التحقق, مدخل[النوع ="مذياع"]:التحقق {
عرض: 20مقصف;
ارتفاع: 20مقصف;
لهجة اللون: بنفسجي مزرق;
حدود: 2مقصفصلب#bcbcbc;
}
مدخل[النوع ="مربع الاختيار"]:يحوم, مدخل[النوع ="مذياع"]:ركز {
عرض: 20مقصف;
ارتفاع: 20مقصف;
لهجة اللون: إعادة غزو;
حدود: 2مقصفصلب#bcbcbc;
}

بالإضافة إلى ذلك ، يمكنك إضافة تأثيرات ديناميكية إلى مربعات الاختيار وأزرار الاختيار باستخدام تحويلات CSS والانتقالات والرسوم المتحركة. هذا يحسن تجربة المستخدم عن طريق إضافة القليل من التفاعل.

تخصيص مربع الاختيار والدول زر الراديو

بينما تعمل تقنيات التصميم الأساسية على تحسين المظهر المرئي لمربعات الاختيار وأزرار الاختيار ، فإن تخصيص مظهرها في حالات مختلفة يمكن أن يساعد في ضمان تجربة مستخدم سلسة.

يمكنك نمط الحالة غير المحددة لإنشاء تمثيل مرئي مميز ، مثل تغيير لون الخلفية والحدود أو إضافة رموز مخصصة. بهذه الطريقة ، يمكن للمستخدمين تحديد الخيارات المتاحة بسرعة.

/ * رمز مخصص لحالة مربع الاختيار غير المحددة * /
مدخل[النوع ="مربع الاختيار"] {
عرض: لا أحد;
}
ملصق {
حشوة: 3مقصف;
خلفية: عنوان url("دون رادع.بي إن جي") لا تكرارغادرمركز;
المساحة المتروكة لليسار: 30مقصف;
}

وبالمثل ، يمكنك تغيير لون الخلفية أو إضافة علامة اختيار وأيقونة مخصصة للإشارة إلى حالة محددة. هناك طريقة أخرى يمكنك اتباعها وهي ضبط حجم وشكل العنصر. من خلال جعل الحالة المحددة بارزة بشكل مرئي ، فإنك تضمن أن المستخدمين يمكنهم بسهولة تحديد اختياراتهم المحددة.

/ * رمز مخصص لحالة التحقق من خانة الاختيار * /
مدخل[النوع ="مربع الاختيار"]:التحقق + ملصق {
حشوة: 3مقصف;
خلفية: عنوان url("التحقق.بي إن جي") لا تكرارغادرمركز;
المساحة المتروكة لليسار: 30مقصف;
}

يمكنك استخدام أي صورة تريدها ، على الرغم من أن العلامات والتقاطعات ستكون أكثر شيوعًا:

من المهم أيضًا مراعاة حالة الإعاقة. يجب أن تعطي مربعات الاختيار وأزرار الاختيار مظهرًا مختلفًا لإخبار المستخدم بأنه لا يمكنه التفاعل معها.

/ * التخصيص لحالة تعطيل مربع الاختيار * /
مدخل[النوع ="مربع الاختيار"]:عاجز, مدخل[النوع ="مذياع"]:عاجز {
عرض: 30مقصف; 
ارتفاع: 30مقصف; 
العتامة: 0.5; 
منقي: مشبع(0); 
/ * اجعل مربع الاختيار وزر الاختيار باللون الرمادي * /
لون الخلفية: RGB(255, 68, 0); 
الصورة الخلفية: عنوان url("عاجز.بي إن جي");
}

تقنيات التخصيص المتقدمة

إلى جانب التصميم الأساسي وتخصيص الحالة ، تقدم CSS تقنيات تخصيص متقدمة لتمييز تصميم الويب الخاص بك. تسمح هذه التقنيات بتصميمات أكثر إبداعًا وفريدة من نوعها يمكن أن تعزز تجربة المستخدم.

على سبيل المثال ، يمكنك استخدام الصور أو الرموز المخصصة كتمثيل مرئي لمربعات الاختيار وأزرار الاختيار.

أيضًا ، عناصر CSS الزائفة مثل ::قبل و ::بعد تسمح لك بإنشاء رسوم متحركة وانتقالات سلسة.

/ * خانة اختيار قبل وبعد العناصر الزائفة * /
مدخل[النوع ="مربع الاختيار"]ملصق::قبل {
محتوى: "➡️➡️";
عرض: مضمنة كتلة;
ارتفاع: 16مقصف;
عرض: 16مقصف;
حدود: 1مقصفصلب;
}
ملصق::بعد {
محتوى: "😁😁";
عرض: مضمنة كتلة;
ارتفاع: 6مقصف;
عرض: 9مقصف;
يسار الحد: 2مقصفصلب;
الحد السفلي: 2مقصفصلب;
تحول: استدارة(-45 درجة);
}

اعتبارات الوصول

عند تخصيص مربعات الاختيار وأزرار الاختيار ، من المهم أن تقوم بذلك فهم تقنيات تحسين الوصول إلى الويب. بهذه الطريقة ، يمكنك إنشاء تجربة شاملة لجميع المستخدمين ، وخاصة ذوي الإعاقة الجسدية.

1. الحفاظ على البنية الدلالية

تأكد من أن مربعات الاختيار وأزرار الاختيار المعدلة لا تزال تحتفظ بهيكل HTML الأساسي الخاص بها. يتضمن هذا الارتباط بين الإدخال والتسمية الخاصة به باستخدام ل و بطاقة تعريف صفات. يسمح هذا للتقنيات المساعدة بربط الملصق بعنصر النموذج بشكل صحيح.

2. تقديم إشارات بصرية

تأكد من أن التخصيصات الخاصة بك توفر إشارات مرئية واضحة للحالات المختلفة لمربعات الاختيار وأزرار الاختيار. استخدم تباين الألوان أو التسميات النصية أو الرموز للإشارة إلى الحالات المحددة وغير المحددة والمعطلة.

علاوة على ذلك ، تحقق من أن حالة التركيز في مربعات الاختيار وأزرار الاختيار يمكن تمييزها بصريًا. يساعد هذا المستخدمين الذين يتنقلون عبر النموذج باستخدام لوحة المفاتيح لفهم موضع التركيز الحالي.

3. اختبر باستخدام التقنيات المساعدة

تحقق من صحة التخصيصات عن طريق اختبارها باستخدام برامج قراءة الشاشة والتنقل باستخدام لوحة المفاتيح وغير ذلك التقنيات المساعدة التي يستخدمها الناس لضمان التوافق وسهولة الاستخدام.

التوافق عبر المستعرضات

غالبًا ما تفسر المتصفحات المختلفة أنماط CSS وخصائصها بشكل مختلف ، مما قد يؤدي إلى مظاهر غير متسقة عبر الأنظمة الأساسية. لذلك ، عند تخصيص مربعات الاختيار وأزرار الاختيار باستخدام CSS ، من المهم ضمان التوافق عبر المستعرضات.

أول شيء يجب عليك فعله هو اختبار الكود الخاص بك على متصفحات شائعة مثل Chrome و Firefox و Safari و Edge. يجب عليك أيضًا الاختبار عبر إصدارات مختلفة من نفس المتصفح لتحديد أي تناقضات في العرض.

إذا كان هناك أي تفاوت في المحتوى المعروض ، فيمكنك استخدام بادئات موردي CSS لإضافة تعليق توضيحي إلى شفرتك. تشمل البادئات مثل -webkit-, -موز-، و -آنسة- لتغطية نطاق أوسع من المتصفحات. يجب أيضًا استخدام الأنماط الاحتياطية لضمان استمرار إمكانية الوصول إلى عناصر النموذج إذا كان متصفح الزائر لا يدعم خاصية CSS معينة.

.checkbox {
/ * دعم Firefox * /
-موز-الانتقال: الجميع 4سيُسَهّل;
/ * دعم Opera * /
-o- الانتقال: الجميع 4سيُسَهّل;
/ * دعم المتصفحات القائمة على webkit
 (كروم, سفاري, iOS, إلخ.) */
-webkit- الانتقال: الجميع 4سيُسَهّل;
/ * دعم Edge و Internet Explorer * /
-ms- الانتقال: الجميع 4سيُسَهّل;
/ * خاصية معيارية * /
انتقال: الجميع 4سيُسَهّل;
}

أخيرًا ، تابع تحديثات المتصفح ومواصفات CSS الجديدة ، وتحقق من صحة كود CSS الخاص بك لاكتشاف أي أخطاء في بناء الجملة أو مشكلات التوافق.

أفضل الممارسات لتخصيص مربع الاختيار وزر الاختيار

لضمان التخصيص الفعال والفعال لمربعات الاختيار وأزرار الاختيار ، يجب مراعاة أفضل الممارسات هذه.

1. الحفاظ على الوضوح وسهولة الاستخدام

بينما يتيح لك التخصيص أن تكون مبدعًا ، يجب عليك إعطاء الأولوية للوضوح وسهولة الاستخدام. وهذا يضمن أن مربعات الاختيار وأزرار الاختيار يسهل التعرف عليها وبديهية للمستخدمين للتفاعل معها.

يجب أن تتوافق تصميماتك مع الموضوع العام لموقعك على الويب أو تطبيقك. حافظ على نمط مرئي متسق ، بما في ذلك نظام الألوان والطباعة والتخطيط ، لتوفير تجربة مستخدم متماسكة.

2. الرسم المتجاوب

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

3. اختبر وكرر

اختبر بانتظام عناصر النموذج المخصصة في سيناريوهات مختلفة لتحديد أي مشكلات في قابلية الاستخدام أو تناقضات. يمكنك أيضًا التماس ملاحظات المستخدم وتكرار التصميم لزيادة تحسين تجربة المستخدم.

4. توثيق عملية التخصيص

قم بتوثيق كود CSS والتقنيات المستخدمة للتخصيص. ستكون هذه الوثائق مفيدة للرجوع إليها في المستقبل والصيانة والتعاون مع المطورين الآخرين.

باتباع أفضل الممارسات هذه ، يمكنك إنشاء مربعات اختيار وأزرار اختيار مخصصة لا تعمل فقط على تحسين المظهر المرئي ولكن أيضًا تعطي الأولوية لقابلية الاستخدام ورضا المستخدم.

تخصيص عناصر نموذج HTML الأخرى باستخدام CSS

إلى جانب مربعات الاختيار وأزرار الاختيار ، يوفر HTML العديد من أنواع إدخال النماذج الأخرى ، مثل زر, تاريخ, بريد إلكتروني, ملف, كلمة المرور، و نص. تتيح لك حقول الإدخال هذه إنشاء صفحات ويب تفاعلية للغاية وتلقي جميع أنواع معلومات المستخدم.

وأفضل جزء؟ كلها قابلة للتخصيص بالكامل باستخدام CSS ، مما يسمح لك بإنشاء رسوم متحركة وانتقالات وتصميمات مخصصة. في حين أن CSS قوية وسهلة الاستخدام للغاية ، يمكنك تحسين الإنتاجية باستخدام أطر مثل Bootstrap و Tailwind CSS و Foundation.