كيفية إنشاء أزرار راديو مخصصة رائعة باستخدام HTML و CSS فقط

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

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

 

زر الاختيار أو زر الخيار هو عنصر تحكم رسومي يسمح للمستخدم بتحديد أحد الخيارات العديدة المحددة. تسمى أزرار الراديو لأنها تعمل إعدادات مسبقة للقنوات على أجهزة الراديو. يمكن تحديد زر اختيار في HTML باستخدام علامة <input type = ”radio”>.

 

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

 

في الفيديو ، شاهدت أزرار الراديو المخصصة الرائعة أو أزرار الخيارات. كما تعلم ، عندما نقرت على النص ، يتم تحديد الخيار المعين ويكون ذلك ممكنًا فقط مع علامة HTML <label> لأنه في علامة التصنيف توجد سمة لـ وداخل هذه السمة ، نحتاج إلى تمرير اسم معرف < نوع الإدخال = ”راديو”> للتحكم في هذه العلامة بعلامة التسمية.

 

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

 

أزرار خيارات مخصصة رهيبة

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

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow