Square checkboxes/label ML

by Manuel Souto Pico

HTML

<form action="#">


  <div class="tile_div">

    <input type="checkbox" id="n" name="n" value="≠" class="coolbox" />
    <label class="coolbox" for="n">≠</label>
    <input type="checkbox" id="c" name="c" value="Aa" class="coolbox" />
    <label class="coolbox" for="c">Aa</label>
    <input type="checkbox" id="b" name="b" value="[abc]" class="coolbox" />
    <label class="coolbox" for="b" id="b">[abc]</label>
    <input type="checkbox" id="f" name="f" value="[…]" class="coolbox" />
    <label class="coolbox" for="f">[…]</label>
    <input type="checkbox" id="p" name="p" value="+w" class="coolbox" />
    <label class="coolbox" for="p">+w</label>
    <input type="checkbox" id="r" name="r" value=".*" class="coolbox" />
    <label class="coolbox" for="r">.*</label>
    <input type="checkbox" id="w" name="w" value="?*" class="coolbox" />
    <label class="coolbox" for="w">?*</label>

  </div>


</form>

CSS

label.coolbox {
  height: 19px;
  width: 19px;
  cursor: pointer;
  background: #3d85c6;
  background: -webkit-linear-gradient(#3d85c6, #073763);
  background: linear-gradient(#3d85c6, #073763);
  border: 1px solid #556699;
  border-radius: 3px;
  color: #ffffff;
    display: inline-block;
  text-align: center;
  vertical-align: middle;
  text-shadow: 1px 1px #000000;
  padding: 1px;
}

input:checked + label.coolbox {
  color: #9F9;
}

input.coolbox {
  display: none;
}

.coolbox:not(#b) {
  font: normal 900 15px/1 "Calibri", sans-serif;
}

#b {
  font: normal 900 10px/1 "Calibri", sans-serif;
}

.tile_div {
  vertical-align: middle;
  display: inline-block;
}