Bootstrap list-group-items as checkboxes and radio buttons (using pure CSS)

list-group.css

// https://codepen.io/lehonti/pen/OzoXVa
.list-group-item {
  user-select: none;
  border-left: none;
  border-right: none;
  border-color: rgba(0, 0, 0, .05);
}

.list-group {
  height: 400px;
  overflow-y: scroll;
  border-top: 1px solid rgba(0, 0, 0, .125);
  border-bottom: 1px solid rgba(0, 0, 0, .125);

  label:first-of-type {
    border-top: none;
  }

  label:last-of-type {
    border-bottom: none;
  }

  input[type='checkbox'] {
    display: none;

    & + .list-group-item {
      cursor: pointer;

      &:before {
        content: '\2713';
        color: transparent;
        font-weight: bold;
        margin-right: 1em;
      }
    }

    &:checked {
      & + .list-group-item {
        background-color: #0275d8;
        color: #fff;

        &:before {
          color: inherit;
        }
      }
    }
  }
}