درخواست پیش فاکتور

آموزش ساخت دکمه رادیویی سفارشی

  • ۲۴ اردیبهشت ۱۳۹۸
  • بدون دیدگاه
  • مجید عابد
آموزش ساخت دکمه رادیویی سفارشی

با سلام خدمت شما کاربران گرامی . امروز آموزش ساخت دکمه رادیویی سفارشی را برای شما عزیزان آماده کرده ایم که میتوانید با ساخت آن در وب سایت خود این مورد را استفاده کنید . این دکمه رادیویی به دلیل ظاهر زیبای خود میتواند بر جذابیت فرم ها و عملکرد سایت شما بیافزاید . پیشنهاد میکنیم تا پایان با ما همراه باشید .

آموزش ساخت دکمه رادیویی سفارشی

آموزش ساخت دکمه رادیویی سفارشی

آموزش ساخت دکمه رادیویی سفارشی

در ابتدای کار ، دکمه رادیویی ما دارای دو گزینه میباشد . این دو گزینه را میخواهیم به شکل زیباتری به کاربران نمایش دهیم . خب حالا میخواهیم سراغ کد اچ تی ام ال خود برویم . بعنوان مثال آرشیوی در اختیار کاربر قرار میدهیم که امکان تنظیم به صورت ماهانه و یا سالانه دارد و دارای دو گزینه به نام Monthly و Yearly میباشد . کد اچ تی ام ال ما مشابه کد زیر میباشد :

ما در کد بالای کلاسی به نام sr-only را داریم که برای مخفی کردن عناصر ظاهری در زمانی که قابل دسترس هستند میباشد . خب حالا زمان استایل دهی به عناطر ما با کد های سی اس اس میباشد .

حالا باید عنصری اضافه کنیم که به عنوان پس زمینه گزینه انتخاب شده باشد . کد اچ تی ام ال آن بخش چیزی مشابه کد زیر خواهد بود :

ما در کد بالا یک کلاس aria-hidden استفاده کردیم که مربوط به مخفی کردن عنصر میباشد . حالا باید استایل مربوط به این عنصر را اضافه کنیم :

تکه کد دیگری که در این میان نباید فراموش شود ، استایل در حالت فوکوس کردن میباشد .

زمانی که یک گزینه انتخاب میشود (منظور یکی از عناصر دکمه رادیویی میباشد ) ، یک استایل box-shadow به عنصر فوکوس شده بر روی آن فعال میشود . البته توجه کنید که کلاس :focus-within ممکن است بر روی تمامی مرورگرهای جدید جواب ندهد . برای حل این مشکل ما از ترفندهای css استفاده میکنیم :

کار تمام است و اکنون میتوانیم از دکمه رادیویی خود استفاده کنیم 🙂 . خروجی چیزی مشابه تصویر زیر خواهد شد .

 

آموزش ساخت دکمه رادیویی سفارشی

آموزش ساخت دکمه رادیویی سفارشی

امیدواریم که از این آموزش استفاده کافی برده باشید . خوشحال میشویم نظرات خود را با ما در میان بگذارید .

امتیاز شما به این مقاله ؟
خیلی بدبدمعمولیخوبخیلی عالی
2 رای : 5٫00 از 5

دکتر رنک فروشگاه قالب وردپرس تمی لول رنگ - پالت رنگ های مورد تایید آی وحید درگاه پرداخت واسط jibme