How to properly style checkbox with letter in it? - html

Question

How to properly style checkbox with letter in it.
Here is the code what I have done but due to similar IDs the style in it was not working.
The First checkbox working as expected but the second not working.
Also I want when the check box clicked the Text in it will invisible.
Can we use class based so that it can be reused ?
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.roundchk {
position: relative;
}
.roundchk label {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
cursor: pointer;
height: 28px;
left: 0;
position: absolute;
top: 0;
width: 28px;
font-size: 16px;
padding: 3px 0px 2px 5px;
}
.roundchk label:after {
border: 2px solid #fff;
border-top: none;
border-right: none;
content: "";
height: 6px;
left: 7px;
opacity: 0;
position: absolute;
top: 8px;
transform: rotate(-45deg);
width: 12px;
}
.roundchk input[type="checkbox"] {
visibility: hidden;
}
.roundchk input[type="checkbox"]:checked + label {
background-color: #66bb6a;
border-color: #66bb6a;
}
.roundchk input[type="checkbox"]:checked + label:after {
opacity: 1;
}
<div class="container">
<div class="row">
<form class="form-horizontal">
<!-- Text input-->
<div class="container">
<h2>
Select Weekdays
</h2>
<table width="100%" border="0">
<tr>
<td>
<div class="roundchk">
<input name="Sunday" type="checkbox" id="checkbox" value="Sun"/>
<label for="checkbox"> S </label>
</div>
</td>
<td>
<div class="roundchk">
<input name="Monday" type="checkbox" id="checkbox" value="Monday"/>
<label for="checkbox"> M </label>
</div>
</td>
<td>
<div class="roundchk">
<input name="Tues" type="checkbox" id="checkbox" value="Tues"/>
<label for="checkbox"> T </label>
</div>
</td>
<td>
<div class="roundchk">
<input name="Wed" type="checkbox" id="checkbox" value="Wed"/>
<label for="checkbox"> W </label>
</div>
</td>
<td>
<div class="roundchk">
<input name="Thurs" type="checkbox" id="checkbox" value="Thurs"/>
<label for="checkbox"> T </label>
</div>
</td>
<td>
<div class="roundchk">
<input type="checkbox" id="checkbox-Fri" name="Fri"/>
<label for="checkbox"> F </label>
</div>
</td>
<td>
<div class="roundchk">
<input type="checkbox" id="checkbox-sat" name="Sat" />
<label for="checkbox"> S </label>
</div>
</td>
</tr>
</table>
</div>
</form>
</div>
</div>

Answer 1

The id of a labelable form-related element in the same document as the element. The first element in the document with an id matching the value of the for attribute is the labeled control for this label element, if it is a labelable element. If it is not labelable then the for attribute has no effect. If there are other elements which also match the id value, later in the document, they are not considered.
read label - MDN's for attribute
Try this,
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.roundchk {
position: relative;
}
.roundchk label {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
cursor: pointer;
height: 28px;
left: 0;
position: absolute;
top: 0;
width: 28px;
font-size: 16px;
padding: 3px 0px 2px 5px;
}
.roundchk label:after {
border: 2px solid #fff;
border-top: none;
border-right: none;
content: "";
height: 6px;
left: 7px;
opacity: 0;
position: absolute;
top: 8px;
transform: rotate(-45deg);
width: 12px;
}
.roundchk input[type="checkbox"] {
visibility: hidden;
}
.roundchk input[type="checkbox"]:checked + label {
background-color: #66bb6a;
border-color: #66bb6a;
}
.roundchk input[type="checkbox"]:checked + label:after {
opacity: 1;
}
<div class="container">
<div class="row">
<form class="form-horizontal">
<!-- Text input-->
<div class="container">
<h2>
Select Weekdays
</h2>
<table width="100%" border="0">
<tr>
<td>
<div class="roundchk">
<input name="Sunday" type="checkbox" id="checkbox-sun" value="Sun"/>
<label for="checkbox-sun"> S </label>
</div>
</td>
<td>
<div class="roundchk">
<input name="Monday" type="checkbox" id="checkbox-mon" value="Monday"/>
<label for="checkbox-mon"> M </label>
</div>
</td>
<td>
<div class="roundchk">
<input name="Tues" type="checkbox" id="checkbox-tue" value="Tues"/>
<label for="checkbox-tue"> T </label>
</div>
</td>
<td>
<div class="roundchk">
<input name="Wed" type="checkbox" id="checkbox-wed" value="Wed"/>
<label for="checkbox-wed"> W </label>
</div>
</td>
<td>
<div class="roundchk">
<input name="Thurs" type="checkbox" id="checkbox-thrus" value="Thurs"/>
<label for="checkbox-thrus"> T </label>
</div>
</td>
<td>
<div class="roundchk">
<input type="checkbox" id="checkbox-fri" name="Fri"/>
<label for="checkbox-fri"> F </label>
</div>
</td>
<td>
<div class="roundchk">
<input type="checkbox" id="checkbox-sat" name="Sat" />
<label for="checkbox-sat"> S </label>
</div>
</td>
</tr>
</table>
</div>
</form>
</div>
</div>