Custom Radio Button

Custom Radio Button - CSS

.__radio_field {
  border: 1px solid #767676;
  padding: 8px 15px;
  input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    cursor: default;
    &:checked ~ label {
      .__mark {
        i {
          background: #767676;
        }
      }
    }
  }
  label {
    color: #767676;
    cursor: pointer;
    .__mark,
    .__label {
      display: inline-block;
      vertical-align: middle;
    }
    .__mark {
      height: 15px;
      width: 15px;
      padding: 2px;
      border: 1px solid #767676;
      margin-right: 10px;
      border-radius: 50%;
      i {
        display: block;
        width: 100%;
        height: 100%;
        background: transparent;
        border-radius: 50%;
      }
    }
  }
}

Custom Radio Button - HTML

<div class="__filter_by_date">
        <label>Filter by date</label>
        <div class="__radio_field">
          <input type="radio" name="filter-date" id="all-dates" value="all-dates">
          <label for="all-dates"><span class="__mark"><i></i></span><span class="__label">All Dates</span></label>
        </div>
        <div class="__radio_field">
          <input type="radio" name="filter-date" id="today" value="today">
          <label for="today"><span class="__mark"><i></i></span><span class="__label">Today</span></label>
        </div>
        <div class="__radio_field">
          <input type="radio" name="filter-date" id="7-days" value="7-days">
          <label for="7-days"><span class="__mark"><i></i></span><span class="__label">Next 7 Days</span></label>
        </div>
        <div class="__radio_field">
          <input type="radio" name="filter-date" id="select-dates" value="select-dates">
          <label for="select-dates"><span class="__mark"><i></i></span><span class="__label">Select Dates</span></label>
        </div>
      </div>