<div class=grid>
<input type=checkbox>checkbox #1
<input type=checkbox>checkbox #2
<input type=checkbox>checkbox #3
<input type=checkbox>checkbox #4
<input type=checkbox>checkbox #5
<input type=checkbox>checkbox #6
<div class=total>
<span class=totalChecked> Total checked: </span>
<span class=totalUnChecked> Total Unchecked: </span>
</div>
</div>
/* counter code */
::root {
counter-reset: checked-sum, unchecked-sum;
}
input[type="checkbox"] {
counter-increment: unchecked-sum;
}
input[type="checkbox"]:checked {
counter-increment: checked-sum;
}
.totalUnChecked::after {
content: counter(unchecked-sum);
}
.totalChecked::after {
content: counter(checked-sum);
}
/* grid code */
.grid {
display: grid;
grid-template-columns: max-content max-content;
grid-row-gap: 6px;
}
.total {
grid-row: 1;
grid-column: 1 / 3;
}
/* decoration */
body {
font-family: "bellefair";
color: navy;
font-size: 13pt;
}
/* note: checkbox pseudo element won't work for FF */
input[type="checkbox"]::after {
display: block;
content: "";
width: 13px;
height: 13px;
background-color: white;
color: navy;
border: 1px solid navy;
text-align: center;
}
input[type="checkbox"]:checked::after {
content: "✓";
background-color: gold;
}
.grid {
justify-content: center;
border: 5px solid;
border-image: linear-gradient(325deg, navy, gold) 1;
width: 250px;
margin: auto;
padding: 50px 0;
}
.total {
margin: 5px 0 10px 0;
width: 135px;
}
.total span {
background-color: gold;
display: inline-block;
margin-bottom: 3px;
padding: 3px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.