<div class="multiselect">
  <label class="multiselect__item">
    <input type="checkbox" name="anyname[opt1]" value="val1">
    <span>Elem 1</span>
  </label>
  <label class="multiselect__item">
    <input checked type="checkbox" name="anyname[opt2]" value="val2">
    <span>Elem 2</span>
  </label>
  <label class="multiselect__item">
    <input type="checkbox" name="anyname[opt3]" value="val3">
    <span>Elem 3</span>
  </label>
  <label class="multiselect__item">
    <input type="checkbox" name="anyname[opt4]" value="val4">
    <span>Elem 4</span>
  </label>
</div>
.multiselect {
  width: 300px;
  border-radius: 20px;
  border: 2px solid red;
  overflow: hidden;
  &__item {
    display: block;
    &:not(:first-child) span {
      border-top: 1px solid red;
    }
    span {
      display: block;
      padding: 0.25em 2em;
      &:hover {
        background: lime;
      }
    }
    &:focus-within span {
      outline: 3px dotted red;
      outline-offset:-3px;
      box-shadow: none;
    }
  }
  input {
    position: absolute;
    left: -9999px;
  }
  input:checked + span {
    background: pink;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.