Este es el ejemplo con checkboxes (que puedes encontrar originalmente en esta [respuesta](https://stackoverflow.com/a/3772914/6658955)):

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    input[type=checkbox] {
      display: none;
    }

    input[type=checkbox]+label {
      background: #999;
      height: 20px;
      width: 20px;
      display: inline-block;
      padding: 5px;
    }

    input[type=checkbox]:checked+label {
      background: #0080FF;
      height: 20px;
      width: 20px;
      display: inline-block;
      padding: 5px;
    }

<!-- language: lang-html -->

    <form>
      <input type='checkbox' name='thing1' value='valuable' id="thing1" /><label for="thing1">D</label>
      <input type='checkbox' name='thing2' value='valuable' id="thing2" /><label for="thing2">L</label>
      <input type='checkbox' name='thing3' value='valuable' id="thing3" /><label for="thing3">M</label>
      <input type='checkbox' name='thing4' value='valuable' id="thing4" /><label for="thing4">X</label>
      <input type='checkbox' name='thing5' value='valuable' id="thing5" /><label for="thing5">J</label>
      <input type='checkbox' name='thing6' value='valuable' id="thing6" /><label for="thing6">V</label>
      <input type='checkbox' name='thing7' value='valuable' id="thing7" /><label for="thing7">S</label>
      <br><br>
      <button type="submit">Enviar</button>
    </form>

<!-- end snippet -->