Understanding how label works when elements hidden - html

Question

I am trying to understand, how a can label work in conjunction with elements states like input[type="type=""]:checked or input[type=""]:unchecked.I got a very basic example which I am trying to work out, but I cannot make the label a circle or square that can have a check mark or unchecked when clicked. What makes the label have that outlook and showing checked and unchecked state? Does the label need to have a width and height? If so do I need to make it a block level element.
input[type="checkbox"]{
width:0;
heigh:0;
/* or display:none? */
}
label{
position:relative;
width: 20px;
height: 20px;
cursor: pointer;
}
label:before,
label:after{
font-size:50px;
}
label:before{
content: '\f096'; /
//Can be some good example
}
label:after{
content: '\f00c';
//Can be some good example
}
input[type="checkbox"]:checked{
content:"check"
//Can be some good example
}
input[type="checkbox"]:unchecked{
content:"x"
//Can be some good example
}
Something achievable like this but without text next to labels as I want checkbox based on styling.

Answer 1

you need to make a relationship ( css wise ) between your checkbox and the clicked label and change it's content . use css selectors for that. for example + or ~
in the example below i used :before and :after . :after will appear only when the checkbox is :checked. i think this is what you want.
IMPORTANT ! : you set the same id to all checkboxes this is bad because
duplicate ID's are not a good practice when writing HTML
you link all labels to the same checkbox ( all are linked to the checkbox with id checkbox . in the below example all have different ids and so every label is linked with it's corresponding checkbox
see code below
.img-holder{
position:relative
}
.checkbox-holder{
position:absolute;
background: #fcfff4;
margin-top:5px;
margin-left:10px;
width:50px;
}
input[type="checkbox"]{
width:0;
height:0;
}
label{
position:relative;
width: 20px;
height: 20px;
cursor: pointer;
}
label:before,
label:after{
font-size:50px;
}
label:before{
border:2px solid red;
content:"";
height:20px;
width:20px;
border-radius:100%;
display:inline-block;
}
label:after {
content:'';
position:absolute;
width:10px;
height:10px;
border-radius:100%;
background:green;
top:-2px;
left:7px;
opacity:0;
}
input[type="checkbox"]:checked + label:after {
opacity:1;
}
input[type="checkbox"]:checked + label:before {
border-color:green;
}
<div class="container">
<div class="row">
<div class="col-3 img-holder">
<div class="checkbox-holder">
<input type="checkbox" id="checkbox">
<label for="checkbox">
</div>
<img src="https://placeimg.com/300/480/any/grayscale" alt="">
<!-- <div class="flex-column justify-content-center">
<h4 class="add">Added</h4>
<h4 class="remove">Removed</h4>
</div> -->
</div>
<div class="col-3 img-holder">
<div class="checkbox-holder">
<input type="checkbox" id="checkbox2">
<label for="checkbox2">
</div>
<img src="https://placeimg.com/300/480/any/sephia" alt="">
<!-- <div class="flex-column justify-content-center">
<h4 class="add">Added</h4>
<h4 class="remove">Removed</h4>
</div> -->
</div>
<div class="col-3 img-holder">
<div class="checkbox-holder">
<input type="checkbox" id="checkbox3">
<label for="checkbox3">
</div>
<img src="https://placeimg.com/300/480/nature/grayscale" alt="">
<!-- <div class="flex-column justify-content-center">
<h4 class="add">Added</h4>
<h4 class="remove">Removed</h4>
</div> -->
</div>
<div class="col-3 img-holder">
<div class="checkbox-holder">
<input type="checkbox" id="checkbox4">
<label for="checkbox4">
</div>
<img src="https://placeimg.com/300/480/arch/grayscale" alt="">
<!-- <div class="flex-column justify-content-center">
<h4 class="add">Added</h4>
<h4 class="remove">Removed</h4>
</div> -->
</div>
</div>
</div>

Answer 2

You cannot change the content the label itself, but you can control the content of the pseudo element after and before. You can add the logic of square/circle with something that can represent check and uncheck.
input[type='checkbox'] {
width: 0;
height: 0;
}
input[type='checkbox']:checked + label:after {
content: "checked";
}
Demo
To answer your question in the comment
How they make funky circle buttons and put a checkbox inside it when one clicks?
You can use CSS animations. The label will already have the check symbol in it but won't have shown in the unchecked state of the input box. And when the element is checked, it will change the opacity to 1, showing the checkbox in an animated way.
input[type='checkbox'] {
width: 0;
height: 0;
}
input[type='checkbox'] + label:after {
content: "checked";
opacity: 0;
-webkit-transition: all 0.50s;
-moz-transition: all 0.50s;
-o-transition: all 0.50s;
transition: all 0.50s;
}
input[type='checkbox']:checked + label:after {
opacity: 1;
}
Demo

Answer 3

If you want a custom look and behavior for your checkboxes, you'll have to use some trickery. This involves using CSS to hide your checkboxes and draw a stylable box instead + a ✔ character when your checkbox is selected.
Here's a pretty basic example :
var items = document.getElementsByClassName("item");
for (var i=0; i < items.length; i++) {
items[i].addEventListener("click", function(){
var checkbox = this.querySelector("input[type='checkbox']");
checkbox.checked = checkbox.checked ? false : true;
this.classList.toggle("selected", checkbox.checked);
});
}
.item {
padding: 5px 30px 5px 30px;
display: block;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.item:hover {
cursor: pointer;
}
.checker {
border-color: #333;
position: absolute;
background: #fff;
width:14px;
height:14px;
border: 2px solid #999;
left: 10px;
z-index: -5;
display: block;
}
.selected .checker {
border-color: #2199cb;
}
.checker input {
height: 18px;
width: 18px;
opacity: 0;
border: none;
background: none;
}
.selected .checker:after {
color: #ef8730;
width: 16px;
z-index: 99;
font-size: 28px;
margin-top: -40px;
float: right;
content: "\2714";
}
<div class="item">
<label class="checker">
<input type="checkbox">
</label>
Item 1
</div>
<div class="item selected">
<label class="checker">
<input type="checkbox" checked>
</label>
Item 2
</div>
<div class="item">
<label class="checker">
<input type="checkbox">
</label>
Item 3
</div>
See also this JSFiddle demo