<ul>
    <li>
        <input type="checkbox" value="foo">
        foo
        <div class="custom-multiselect "></div>
    </li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

// Custom css for multiple dropdown
li {
  position: relative;
  display: inline-block;

  input {
    position : absolute;
    z-index : -1;
    opacity : 0;

    &:checked ~ & {
      background : black;
    }

    &:disabled ~ & {
      opacity : 0.6;
      pointer-events : none;
    }
  }
}

.custom-multiselect {
  position : absolute;
  top : 10px;
  left : 15px;
  height : 20px;
  width : 20px;
  background : white;
  border: 1px solid $black;

  &:after {
    content: ' ';
    position: absolute;
    display: none;

    li & {
      left : 8px;
      top : 4px;
      width : 3px;
      height : 8px;
      border : solid white;
      border-width : 0 2px 2px 0;
      transform : rotate(45deg);
    }
  }
}