Skip to content

Instantly share code, notes, and snippets.

@andreescocard
Created March 17, 2023 01:07
Show Gist options
  • Save andreescocard/0f1f1e55616f7473d0315a4a63004771 to your computer and use it in GitHub Desktop.
Save andreescocard/0f1f1e55616f7473d0315a4a63004771 to your computer and use it in GitHub Desktop.
checkbox with numbers inside
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment