checkbox with numbers inside

options.html

<style>
    ul {
  padding: 0;
  margin: 0;
  clear: both;
}

li{
  list-style-type: none;
  list-style-position: outside;
  padding: 15px;
  float: left;
}

input[type="checkbox"]:not(:checked), 
input[type="checkbox"]:checked {
  position: absolute;
  left: -9999%;
}

input[type="checkbox"] + label {
  display: inline-block;
  padding: 15px;
  cursor: pointer;
  border: 1px solid black;
  color: black;
  background-color: white;
  margin-bottom: 10px;
  width:20px;
  text-align: center;
}

input[type="checkbox"]:checked + label {
  border: 1px solid white;
  color: white;
  background-color: blue;
}
</style>
<ul id="opcao1" data-explain="alteracoescelulares">
    <li>1) </li>
    <li>
      <input type="checkbox" id="1" name="1" value="1">
      <label for="1">1</label>
    </li>
    <li>
      <input type="checkbox" id="2" name="2" value="2">
      <label for="2">2</label>
    </li>
    <li>
      <input type="checkbox" id="3" name="3" value="3">
      <label for="3">3</label>
    </li>
  </ul>


  <ul id="opcao2" data-explain="epitelios">
    <li>2) </li>
    <li>
      <input type="checkbox" id="4" name="4" value="4">
      <label for="4">4</label>
    </li>
    <li>
      <input type="checkbox" id="5" name="5" value="5">
      <label for="5">5</label>
    </li>
    <li>
      <input type="checkbox" id="6" name="6" value="6">
      <label for="6">6</label>
    </li>
    <li>
        <input type="checkbox" id="6" name="6" value="6">
        <label for="6">6</label>
    </li>
    <li>
        <input type="checkbox" id="7" name="7" value="7">
        <label for="7">7</label>
    </li>
    <li>
        <input type="checkbox" id="8" name="8" value="8">
        <label for="8">8</label>
    </li>
    <li>
        <input type="checkbox" id="9" name="9" value="9">
        <label for="9">9</label>
    </li>
    <li>
        <input type="checkbox" id="10" name="10" value="10">
        <label for="10">10</label>
    </li>
    <li>
        <input type="checkbox" id="11" name="11" value="11">
        <label for="11">11</label>
    </li>
    <li>
        <input type="checkbox" id="33" name="33" value="33">
        <label for="33">33</label>
    </li>
  </ul>


  <ul id="opcao3" data-explain="microbiologia">
    <li>3) </li>
    <li>
        <input type="checkbox" id="12" name="12" value="12">
        <label for="12">12</label>
    </li>
    <li>
        <input type="checkbox" id="13" name="13" value="13">
        <label for="13">13</label>
    </li>
    <li>
        <input type="checkbox" id="14" name="14" value="14">
        <label for="14">14</label>
    </li>
    <li>
        <input type="checkbox" id="15" name="15" value="15">
        <label for="15">15</label>
    </li>
    <li>
        <input type="checkbox" id="16" name="16" value="16">
        <label for="16">16</label>
    </li>
    <li>
        <input type="checkbox" id="17" name="17" value="17">
        <label for="17">17</label>
    </li>
    <li>
        <input type="checkbox" id="18" name="18" value="18">
        <label for="18">18</label>
    </li>
    <li>
        <input type="checkbox" id="19" name="19" value="19">
        <label for="19">19</label>
    </li>
  </ul>

  <ul id="opcao4" data-explain="atipias">
    <li>4) </li>
    <li>
        <input type="checkbox" id="20" name="20" value="20">
        <label for="20">20</label>
    </li>
    <li>
        <input type="checkbox" id="21" name="21" value="21">
        <label for="21">21</label>
    </li>
    <li>
        <input type="checkbox" id="22" name="22" value="22">
        <label for="22">22</label>
    </li>
  </ul>

  <ul id="opcao5" data-explain="conclusaodiagnostica">
    <li>5) </li>
    <li>
        <input type="checkbox" id="25" name="25" value="25">
        <label for="25">25</label>
    </li>
    <li>
        <input type="checkbox" id="26" name="26" value="26">
        <label for="26">26</label>
    </li>
    <li>
        <input type="checkbox" id="27" name="27" value="27">
        <label for="27">27</label>
    </li>
    <li>
        <input type="checkbox" id="28" name="28" value="28">
        <label for="28">28</label>
    </li>
    <li>
        <input type="checkbox" id="29" name="29" value="29">
        <label for="29">29</label>
    </li>
    <li>
        <input type="checkbox" id="30" name="30" value="30">
        <label for="30">30</label>
    </li>
    <li>
        <input type="checkbox" id="31" name="31" value="31">
        <label for="31">31</label>
    </li>
    <li>
        <input type="checkbox" id="32" name="32" value="32">
        <label for="32">32</label>
    </li>
    <li>
        <input type="checkbox" id="34" name="34" value="34">
        <label for="34">34</label>
    </li>
    <li>
        <input type="checkbox" id="35" name="35" value="35">
        <label for="35">35</label>
    </li>
    <li>
        <input type="checkbox" id="40" name="40" value="40">
        <label for="40">40</label>
    </li>
  </ul>