Custom Radio button

Custom pure css radio button

by dipaktelangre

HTML

<hr>
<div class="btn-radio">
  <input
         class="radio-sm"
         type="radio"
         name="sizeRadios"
         id="sizeRadios1"
         value="option1"
         checked
         />
  <label class="" for="sizeRadios1">
    Radio button
  </label>
</div>

<div class="btn-radio" style="max-width:100px;">
  <input
         class="radio-sm"
         type="radio"
         name="sizeRadios"
         id="sizeRadios2"
         value="option2"
         checked
         />
  <label class="" for="sizeRadios2">
    This is long text radio button 
  </label>
</div>

<hr>

<div class="btn-checkbox">
  <input
         class="radio-sm"
         type="checkbox"
         name="checkboxButton"
         id="checkboxButton1"
         value="option1"
         checked
         />
  <label class="" for="checkboxButton1">
    My Checkbox
  </label>
</div>

<div class="btn-checkbox" style="max-width:150px;">
  <input
         class="radio-sm"
         type="checkbox"
         name="checkboxButton"
         id="checkboxButton2"
         value="option1"
         checked
         />
  <label class="" for="checkboxButton2">
    My Checkbox long text should be allign 
  </label>
</div>

<hr>

SCSS

$cds-enable-pointer-cursor-for-buttons: true;
$cds-border-color: #adb5bd;
$cds-component-active-color : white;
$cds-gray-100 : #f8f9fa;
$cds-component-active-bg : #007a9d;
$cds-white : white;
$cds-input-btn-focus-width : 0.2rem;
$cds-input-btn-focus-color-opacity: 0.25;

.btn-radio {
  position: relative;
  margin-bottom: 0.5rem;
  line-height: 1;
}

input[type="radio"] {
  display: none;
  & + label {
    cursor: if($cds-enable-pointer-cursor-for-buttons, pointer, null);
    margin-bottom: 0.5rem;
    &:before {
      content: "";
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 3px;
      border: 2px solid $cds-border-color;
      background-color: $cds-component-active-color;
      border-radius: 50%;
      vertical-align: middle;
    } 
  }
  
  /* // Disabled comes first so active can properly restyle */
  &.disabled,
  &:disabled {
    & + label {
      background-color: $cds-gray-100;
      opacity: 0.5;
     
      cursor: if($cds-enable-pointer-cursor-for-buttons, not-allowed, null);
    }
  }

  &:not(:disabled):not(.disabled) {
    & + label {
      /* @include hover() {
        &:before {
          @include box-shadow($cds-input-btn-focus-box-shadow);
        }
      } */
    }
  }

   // Checked
  &:checked {
    & + label {
      &:before {
        background-color: $cds-component-active-bg;
        border-color: $cds-component-active-bg;
      }
      &:after {
        content: "";
        position: absolute;
        left: 8px;
        top: 8px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background-color: $cds-white;
      }
    }
  } 
}



/* Checkbox  */

.btn-checkbox {
  position: relative;
  margin-bottom: 0.5rem;
  line-height: 1;
}

input[type="checkbox"] {
  display: none;
  & + label {
    cursor: if($cds-enable-pointer-cursor-for-buttons, pointer, null);
    margin-bottom: 0.5rem;
    &:before {
      content: "";
      display: inline-block;
      width: 20px;
     ...