كيفية تصميم مربع اختيار مخصص باستخدام HTML و CSS فقط

ستتعلم اليوم في هذه المدونة كيفية إنشاء مربع اختيار مخصص أو تبديل باستخدام HTML و CSS فقط. لإنشاء مفتاح تبديل تشغيل / إيقاف

مرحبًا أيها القراء ، ستتعلم اليوم في هذه المدونة كيفية إنشاء مربع اختيار مخصص أو تبديل باستخدام HTML و CSS فقط. لإنشاء مفتاح تبديل تشغيل / إيقاف.

 

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

 

في هذا البرنامج (Custom Checkbox أو Toggle Switch) ، على صفحة الويب ، يوجد مفتاح تبديل ونص يسمى "معطل". عند النقر فوق مفتاح التبديل أو مربع الاختيار هذا ، يتم تشغيل مفتاح التبديل أو مربع الاختيار أو تمكينه أو تحديده ويتم تغيير النص أيضًا إلى "ممكّن". عند تشغيل مفتاح التبديل ، يتم أيضًا تغيير لون خلفية التبديل ولون النص.

 

يمكنك أيضًا تشغيل / إيقاف تشغيل مفتاح التبديل بالنقر فوق نص الملصق وهذا برنامج CSS خالص ، مما يعني أنني استخدمت HTML و CSS فقط لإنشاء مفتاح التبديل هذا. يمكنك مشاهدة فيديو تعليمي كامل على هذا البرنامج (Custom Checkbox أو Toggle Switch).

 

في الفيديو ، رأيت مربع الاختيار المخصص أو زر التبديل بين التشغيل / الإيقاف وآمل أن تكون قد فهمت الرموز الأساسية وراء إنشاء هذا البرنامج. كما أخبرتك بالفعل ، هذا برنامج CSS خالص و يجعل النص كزر تبديل ، استخدمت <label for = ”click”> و <input type = ”checkbox” id = ”click”> الآن مع هذا السطر من رمز ، يمكننا التحكم في مربع الاختيار باستخدام التسمية.

 

لكن تذكر أنه عند إنشاء التصنيفات كعنصر تبديل ، لا تنس وضع اسم المعرف لعلامة الإدخال داخل سمة علامة التصنيف. إذا كنت تحب هذا البرنامج (Custom Checkbox Design) وترغب في الحصول على أكواد المصدر. يمكنك بسهولة الحصول على الأكواد المصدرية لهذا البرنامج. للحصول على أكواد المصدر ، تحتاج فقط إلى التمرير لأسفل. يمكنك استخدام مفتاح التبديل هذا في صفحات HTML ومواقع الويب الخاصة بك.

 

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

لإنشاء هذا البرنامج (تصميم مربع الاختيار أو تبديل التبديل). أولاً ، تحتاج إلى تحميل الملف من زر تحميل

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow