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

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

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

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

<ul class="radio-switch">
  <li class="radio-switch__item">
    <input type="radio" class="radio-switch__input sr-only" id="radio1" name="radioSwitch" checked>
    <label for="radio1" class="radio-switch__label">Monthly</label>
  </li>

  <li class="radio-switch__item">
    <input type="radio" class="radio-switch__input sr-only" id="radio2" name="radioSwitch">
    <label for="radio2" class="radio-switch__label">Yearly</label>
  </li>
</ul>

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

:root {
  // style
  --radio-switch-width: 186px;
  --radio-switch-height: 46px;
  --radio-switch-padding: 3px;
  --radio-switch-radius: 50em;

  // animation
  --radio-switch-animation-duration: 0.3s;
}

.radio-switch {
  display: inline-flex;
  padding: var(--radio-switch-padding);
  border-radius: var(--radio-switch-radius);
  border: 1px solid var(--color-contrast-low);
}

.radio-switch__item {
  height: calc(var(--radio-switch-height) - 2*var(--radio-switch-padding));
  width: calc(var(--radio-switch-width)*0.5 - var(--radio-switch-padding));
}

.radio-switch__label {
  display: block;
  line-height: calc(var(--radio-switch-height) - 2*var(--radio-switch-padding));
  text-align: center;
  border-radius: var(--radio-switch-radius);
}

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

<ul class="radio-switch">
  <li class="radio-switch__item">
    <!-- input + label --> 
  </li>

  <li class="radio-switch__item">
    <!-- input + label --> 
    <div class="radio-switch__marker" aria-hidden="true"></div>
  </li>
</ul>

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

.radio-switch__item {
  position: relative;
}

.radio-switch__marker {
  position: absolute;
  top: 0;
  left: -100%;
  height: 100%;
  width: 100%;
  background-color: var(--color-primary);
  border-radius: var(--radio-switch-radius); 
  transition: transform var(--radio-switch-animation-duration);

  .radio-switch__input:checked ~ & { // translate the marker from one side to the other
    transform: translateX(100%);
  }
}

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

.radio-switch {
  // ...

  &:focus-within {
    box-shadow: 0 0 0 3px var(--color-contrast-lower);
  }
}

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

.radio-switch {
  // ...

  &:focus-within {
    box-shadow: 0 0 0 3px var(--color-contrast-lower);
  }
}

.radio-switch__label {
  //..

  .radio-switch__input:focus ~ & { 
    // focus effect in browsers not supporting :focus-within
    background-color: lightness(var(--color-primary), 0.6);
  }

  :not(*):focus-within, // trick to detect :focus-within support -> https://css-tricks.com/using-feature-detection-conditionals-and-groups-with-selectors/
  .radio-switch__input:focus ~ & { 
    // reset focus style for browsers supporting :focus-within
    background-color: transparent;
  }
}

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

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