<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.