Bert McLees Bert McLees - 3 months ago 20
CSS Question

Pure CSS (no JS) way to determine if multiple checkboxes are checked

Using only CSS and HTML, I am trying to place content in a span based on whether two or more checkboxes are in a checked (:checked) state. It's easy enough of course if I only needed to check for one (basically an "OR" situation), but in this case, I effectively need "AND" logic. Suggestions welcome.


The following snippet is supported in modern browsers, according to


<input type="checkbox">
<input type="checkbox">
<div data-text="some string"></div>


div {
  width: 100px;
  height: 100px;
  background: red;

input[type=checkbox]:checked + input[type=checkbox]:checked + div {
  background: blue;
input[type=checkbox]:checked + input[type=checkbox]:checked + div:after {
  display: inline-block;
  content: attr(data-text);
  color: #fff;