Bootstrap card as button to display data - html

Question

I have a custom checkbox, I have added a text, and I want the text to be align right side of a check box ,
Here is jsfidle: https://jsfiddle.net/Mwanitete/ewpo0h1g/1/
Here is HTML
<div class="squaredThree">
<input type="checkbox" name="optionsRadios" id="checkOther" value="other" >
<label for="checkOther">Testing Check-Box</label>
</div>
here css
/* .squaredThree */
.squaredThree {
position: relative;
float:left;
margin: 10px
}
.squaredThree label {
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background: #D7B1D7;
border-radius: 4px;
}
.squaredThree label:after {
content: '';
width: 9px;
height: 5px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
opacity: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.squaredThree label:hover::after {
opacity: 0.3;
}
.squaredThree input[type=checkbox] {
visibility: hidden;
}
.squaredThree input[type=checkbox]:checked + label:after {
opacity: 1;
}
/* end .squaredThree */
.label-text {
position: relative;
left: 10px;
}
what am I missing in my code? any suggestion will be helpful thanks

Answer 1

Move the text outside the label field like below.
<label for="checkOther"></label>Testing check-box
/* .squaredThree */
.squaredThree {
position: relative;
float:left;
margin: 10px
}
.squaredThree label {
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background: #D7B1D7;
border-radius: 4px;
}
.squaredThree label:after {
content: '';
width: 9px;
height: 5px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
opacity: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.squaredThree label:hover::after {
opacity: 0.3;
}
.squaredThree input[type=checkbox] {
visibility: hidden;
}
.squaredThree input[type=checkbox]:checked + label:after {
opacity: 1;
}
/* end .squaredThree */
.label-text {
position: relative;
left: 10px;
}
<div class="squaredThree">
<input type="checkbox" name="optionsRadios" id="checkOther" value="other" >
<label for="checkOther"></label>Testing check-box
</div>
Solution 2: You are applying styles for the checkbox using .squaredThree label:after, but the same it is getting applied for the label also. So use before property for applying the styles for the checkbox label like below. But in this case we were giving the label value here itself.
.squaredThree label:before {
content: 'Testing check-box';
position: absolute;
top: 4px;
left: 30px;
white-space:nowrap;
background: transparent;
}
/* .squaredThree */
.squaredThree {
position: relative;
float:left;
margin: 10px
}
.squaredThree label {
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background: #D7B1D7;
border-radius: 4px;
}
.squaredThree label:after {
content: '';
width: 9px;
height: 5px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
opacity: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.squaredThree label:hover::after {
opacity: 0.3;
}
.squaredThree input[type=checkbox] {
visibility: hidden;
}
.squaredThree input[type=checkbox]:checked + label:after {
opacity: 1;
}
/* end .squaredThree */
.label-text {
position: relative;
left: 10px;
}
.squaredThree label:before {
content: 'Testing check-box';
position: absolute;
top: 4px;
left: 30px;
white-space:nowrap;
background: transparent;
}
<div class="squaredThree">
<input type="checkbox" name="optionsRadios" id="checkOther" value="other" >
<label for="checkOther"></label>
</div>

Answer 2

You've limited the width of .squaredThree label, remove the width: 20px or increase it. Also add padding-left to it:
/* .squaredThree */
.squaredThree {
position: relative;
float:left;
margin: 10px
}
.squaredThree label {
width: 130px;
height: 20px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background: #D7B1D7;
border-radius: 4px;
padding-left: 20px;
}
.squaredThree label:after {
content: '';
width: 9px;
height: 5px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
background: transparent;
opacity: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.squaredThree label:hover::after {
opacity: 0.3;
}
.squaredThree input[type=checkbox] {
visibility: hidden;
}
.squaredThree input[type=checkbox]:checked + label:after {
opacity: 1;
}
/* end .squaredThree */
.label-text {
position: relative;
left: 10px;
}
<div class="squaredThree">
<input type="checkbox" name="optionsRadios" id="checkOther" value="other" >
<label for="checkOther">Testing check-box</label>
</div>