<div class="cards">
<div class="card">
<input type="checkbox"/>
</div>
<div class="card">
<input type="checkbox" />
</div>
<div class="card">
<input type="checkbox"/>
</div>
</div>
/* Cosmetics styles */
body {
margin: .5em;
background: lightgrey;
}
.cards {
display: flex;
flex-wrap: wrap;
}
.card {
flex: 1 0 20%;
position: relative;
margin: .5em;
padding: 2em;
min-height: 4em;
background: white;
border: 3px solid grey;
}
.active { border-color: orangered; }
/* This is where the magic happens */
input[type="checkbox"] {
position: absolute;
top: .5em;
left:.5em;
}
@media (pointer: coarse) {
input[type="checkbox"] {
height: 2em;
width: 2em;
}
}
/* Use z-index to make it accessible to keyboard navigation */
@media (hover: hover) {
input[type="checkbox"] { z-index: -1 }
.card:hover input[type="checkbox"],
input[type="checkbox"]:focus,
input[type="checkbox"]:checked { z-index: auto }
}
View Compiled
$(document).ready(function () {
// Card Multi Select
$('input[type=checkbox]').click(function () {
if ($(this).parent().hasClass('active')) {
$(this).parent().removeClass('active');
}
else
{ $(this).parent().addClass('active'); }
});
});
This Pen doesn't use any external CSS resources.