SO-51690227

by David Thomas

HTML

<form>
  <fieldset>
    <legend>All the labels</legend>
    <fieldset>
      <legend>One</legend>
      <label for="a">a</label>
      <label for="b">b</label>
      <label for="c">c</label>
      <label for="d">d</label>
      <label for="e">e</label>
      <label for="f">f</label>
    </fieldset>
    <fieldset>
      <legend>Two</legend>
      <label for="g">g</label>
      <label for="h">h</label>
      <label for="i">i</label>
      <label for="j">j</label>
      <label for="k">k</label>
      <label for="l">l</label>
    </fieldset>
  </fieldset>
  <fieldset>
    <legend>Group 1</legend>
    <input class="iput" type="checkbox" name="E33" value="33" stock="20" id="a"><label for="a">a</label>
    <input class="iput" type="checkbox" name="E34" value="33" stock="6" id="b"><label for="b">b</label>
    <input class="iput" type="checkbox" name="E646" value="33" stock="7" id="c"><label for="c">c</label>
    <input class="iput" type="checkbox" name="E46" value="33" stock="7" id="d"><label for="d">d</label>
    <input class="iput" type="checkbox" name="E626" value="33" stock="7" id="e"><label for="e">e</label>
    <input class="iput" type="checkbox" name="E656" value="33" stock="7" id="f"><label for="f">f</label>

    <div class="a"> Hello </div>
    <div class="b"> BYE </div>
  </fieldset>
  <fieldset>
    <legend>Group 2</legend>
    <input class="iput" type="checkbox" name="E33" value="33" stock="20" id="g"><label for="g">g</label>
    <input class="iput" type="checkbox" name="E34" value="33" stock="6" id="h"><label for="h">h</label>
    <input class="iput" type="checkbox" name="E646" value="33" stock="7" id="i"><label for="i">i</label>
    <input class="iput" type="checkbox" name="E46" value="33" stock="7" id="j"><label for="j">j</label>
    <input class="iput" type="checkbox" name="E626" value="33" stock="7" id="k"><label for="k">k</label>
    <input class="iput" type="checkbox" name="E656" value="33" stock="7" id="l"><label for="l">l</label>

    <div class="a">...

CSS

label {
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  text-align: center;
  line-height: 1.4em;
  box-shadow: 0 0 0 1px #000;
  border-radius: 0.2em;
  cursor: pointer;
  margin: 0 0.2em;
}

/* styling the <label> adjacent to an <input>: */

input+label {
  color: #000;
  background-color: #fff;
}

/* styling the <label> adjacent to a checked <input>: */

input:checked+label {
  color: #fff;
  background-color: limegreen;
}

div.a,
input:checked~div.a {
  display: block;
}

div.b,
input:checked~input:checked~div.a {
  display: none;
}

input:checked~input:checked~div.b {
  display: block;
}