I'm trying to make the checkbox toggle whenever we press anywhere on the checkbox_wrapper. Here's the jsfiddle of my current code http://ift.tt/2qW2P7b
Here's the code:
.box {
width: 10%;
display: inline-block;
}
#wrapper {
width: 30%;
border: 5px solid RGB(98,98,98);
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
padding-bottom: 2%;
margins: auto;
height: 125px;
}
#wrapper1 {
width: 90%;
border: 5px solid black;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margins: auto;
margin-top: 2px;
height: 125px;
padding-top: 2px;
padding-bottom: 5%;
pading-left: 2px;
padding-right: px;
}
.checkbox_wrapper {
font-family: arial, helvetica;
color: rgb(17, 17, 17);
padding: 0.2em 10%;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-webkit-appearance: none;
border: 1px solid rgb(0, 255, 255);
margin-top: 2px
}
.checkbox_wrapper:hover {
background-color: rgb(89, 89, 89);
cursor: pointer;
border: 0px solid rgb(255, 255, 255);
color: rgb(255, 255, 255);
}
input[type=checkbox],
input[type=radio] {
vertical-align: middle;
position: relative;
bottom: 1px;
}
#checkboxes,
#acft_data,
#time_data {
margin-top: 0.5em;
}
.center {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
input[type=checkbox],
input[type=radio] {
vertical-align: middle;
position: relative;
bottom: 1px;
<body>
<div id="wrapper1" style="text-align:center;">
<div id="wrapper" style="text-align:center;">
<div checkboxes>
<div class="center">
<div class="checkbox_wrapper box">
<input type="checkbox">1</div>
<div class="checkbox_wrapper box">
<input type="checkbox">2</div>
<div class="checkbox_wrapper box">
<input type="checkbox">3</div>
</div>
</div>
<br>
<br>
<div checkboxes>
<div class="center">
<div class="checkbox_wrapper box">
<input type="checkbox">1</div>
<div class="checkbox_wrapper box">
<input type="checkbox">2</div>
<div class="checkbox_wrapper box">
<input type="checkbox">3</div>
</div>
</div>
<br>
<br>
<div checkboxes>
<div class="center">
<div class="checkbox_wrapper box">
<input type="checkbox">1</div>
<div class="checkbox_wrapper box">
<input type="checkbox">2</div>
<div class="checkbox_wrapper box">
<input type="checkbox">3</div>
</div>
</div>
</div>
</div>
</body>
Is it possible to do it without too much work or not? Any suggestion is highly appreciated. Thanks and have a nice day
NOTE: I know this isn't a nice code. I started this and still have to mess around with other stuff like for example the checkbox margin.
Aucun commentaire:
Enregistrer un commentaire