Custom checkbox and radio

capsule style checkbox and radio buttons, CSS checkbox and radio styles

by Vishnuprasad ps

HTML

<h3>Type Radio</h3>
<div class="custom-select">
  <input id="Radio1" name="Radios" type="radio" value="Option 1" checked="checked">
  <label for="Radio1">
    <div class="select-text">Option 1</div>
    <span class="select-count">40</span>
  </label>
</div>

<div class="custom-select">
  <input id="Radio2" name="Radios" type="radio" value="Option 2">
  <label for="Radio2">
    <div class="select-text">Option 2</div>
    <span class="select-count">4</span>
  </label>
</div>

<div class="custom-select">
  <input id="Radio3" name="Radios" type="radio" value="Option 3">
  <label for="Radio3">
    <div class="select-text">Option 3</div>
    <span class="select-count">888</span>
  </label>
</div>

<div>&nbsp;<br /><br /><br />&nbsp;</div>

<h3>Type Checkbox</h3>
<div class="custom-select">
  <input id="Check1" name="Checks" type="checkbox" value="Item 1">
  <label for="Check1">
    <div class="select-text">Item 1</div>
    <span class="select-count">65</span>
  </label>
</div>

<div class="custom-select">
  <input id="Check2" name="Checks" type="checkbox" value="Item 2">
  <label for="Check2">
    <div class="select-text">Item 2</div>
    <span class="select-count">126</span>
  </label>
</div>

<div class="custom-select">
  <input id="Check3" name="Checks" type="checkbox" value="Item 3">
  <label for="Check3">
    <div class="select-text">Item 3</div>
    <span class="select-count">32</span>
  </label>
</div>

SCSS

* {
  box-sizing: border-box;
}

body {
  margin: 2em;
  font-family: sans-serif;
}

h3 {
  display: flex;
  margin: 0 0 10px;
  background: #ccc;
  color: #555;
  border: 1px dashed #999;
  font-size: 16px;
  padding: 0.5rem 1rem;
}


/* Custom Select Styles */

.custom-select {
  display: inline-block;

  input[type="radio"],
  input[type="checkbox"] {
    opacity: 0;
    display: none;

    & + label {
      display: flex;
      align-items: center;
      height: 40px;
      cursor: pointer;
      padding: 0.5rem 0.5rem 0.5rem 1rem;
      border: 0;
      background: #F7F7F7;
      color: #333;
      font-size: 14px;
      border-radius: 20px;
      
      .select-text {
        font-weight: 700;
      }
      
      .select-count {
        margin-left: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 1.5rem;
        padding: 0.5rem;
        border-radius: 16px;
        background-color: #fff;
        color: #333;
      }
    }

    &:checked {
      & + label {
        background: #333;
        color: white;
      }
    }
  }
}