Square checkboxes/button ML

by Manuel Souto Pico

HTML

<form action="#">


  <div class="tile_div">
  
    
  <input type="checkbox" class="coolbox" id="n" name="n" value="≠">
  <input type="button"   class="coolbox" id="n" value="≠" onclick="document.getElementById('n').checked=!document.getElementById('n').checked;" />

  <input type="checkbox" class="coolbox" id="c" name="c" value="Aa">
  <input type="button"   class="coolbox" id="c" value="Aa" onclick="document.getElementById('c').checked=!document.getElementById('c').checked;" />

  <input type="checkbox" class="coolbox" id="b" name="b" value="[abc]">
  <input type="button"   class="coolbox" id="b" value="[abc]" onclick="document.getElementById('b').checked=!document.getElementById('b').checked;" />

  <input type="checkbox" class="coolbox" id="f" name="f" value="[…]">
  <input type="button"   class="coolbox" id="f" value="[…]" onclick="document.getElementById('f').checked=!document.getElementById('f').checked;" />

  <input type="checkbox" class="coolbox" id="p" name="p" value="+w">
  <input type="button"   class="coolbox" id="p" value="+w" onclick="document.getElementById('p').checked=!document.getElementById('p').checked;" />

  <input type="checkbox" class="coolbox" id="r" name="r" value=".*">
  <input type="button"   class="coolbox" id="r" value=".*" onclick="document.getElementById('r').checked=!document.getElementById('r').checked;" />

  <input type="checkbox" class="coolbox" id="w" name="w" value="?*">
  <input type="button"   class="coolbox" id="w" value="?*" onclick="document.getElementById('w').checked=!document.getElementById('w').checked;" />



  </div>
<br/>

  <div class="tile_div">
  
    
  <input type="checkbox" class="coolbox" id="n" name="n" value="≠">
  <input type="button"   class="coolbox" id="n" value="≠" onclick="document.getElementById('n').checked=!document.getElementById('n').checked;" />

  <input type="checkbox" class="coolbox" id="c" name="c" value="Aa">
  <input type="button"   class="coolbox" id="c" value="Aa"...

CSS

input[type="button"].coolbox {
  height: 25px;
  width: 25px;
  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[type="checkbox"]:checked + input[type="button"].coolbox {
  background: #ffffff;
  background: -webkit-linear-gradient(#ffffff, #d8e6f3);
  background: linear-gradient(#ffffff, #d8e6f3);
  text-shadow: 0.5px 0.5px #2a5d8a;
  color:  #3d85c6;
}

input[type="checkbox"].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;
  margin:1px;
}