Custom tick mark in a custom checkobx is not displaying - html

Question

I have a custom checkbox which I want to add a tick mark inside it when checked
Here is code snippet:
input[type="checkbox"] {
transform: scale(3, 3) !important;
margin: 0px 21px;
}
.checkbox-custom,
.checkbox-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px 7px;
cursor: pointer;
font-size: 2.4rem;
font-family: "FuturaPT_BOOK";
/* padding: 6px; */
}
[type="checkbox"]:not(:checked)+label:after,
[type="checkbox"]:checked+label:after {
content: '✔';
position: absolute;
top: 8px;
left: 10px;
font-size: 24px;
line-height: 0.8;
color: #fff;
transition: all .2s;
}
.checkbox-custom+.checkbox-custom-label:before {
content: '';
background: #fff;
border: 1px solid #000;
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
padding: 2px;
margin-right: 30px;
text-align: center;
border-radius: 24%;
}
.checkbox-custom:checked+.checkbox-custom-label:before {
background: #0000;
box-shadow: inset 0px 0px 0px 4px #fff;
}
<p class="checkbox">
<input type="checkbox" class="checkbox checkbox-custom" name="cgv" id="cgv" value="1" {if $checkedTOS}checked="checked" {/if} />
<label class="checkbox-custom-label" for="cgv">{l s='I agree to the terms of service' mod='threepagecheckout'}</label>
{l s='(Read the Terms of Service)' mod='threepagecheckout'}
</p>
unfortunately when I click on check box nothing is displayed, I have tried different combination but nothing worked,
what am I doing wrong?

Answer 1

First you have to hide the default checkbox:
[type="checkbox"] {
display: none
}
Then put some general styling for label:after:
[type="checkbox"]+label:after {
content: '';
position: absolute;
...
}
Then style the :checked state
[type="checkbox"]:checked+label:after {
content: '✔';
}
And also position the tick mark so that it appears correctly in middle of your custom checkbox. Your tick mark was outside the box.
input[type="checkbox"] {
transform: scale(3, 3) !important;
margin: 0px 21px;
}
.checkbox-custom,
.checkbox-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px 7px;
cursor: pointer;
font-size: 2.4rem;
font-family: "FuturaPT_BOOK";
/* padding: 6px; */
}
[type="checkbox"] {
display: none
}
[type="checkbox"]+label:after {
content: '';
position: absolute;
top: 31px;
left: 23px;
font-size: 24px;
line-height: 0.8;
color: #fff;
transition: all .2s;
}
[type="checkbox"]:checked+label:after {
content: '✔';
}
.checkbox-custom+.checkbox-custom-label:before {
content: '';
background: #fff;
border: 1px solid #000;
display: inline-block;
vertical-align: text-top;
width: 30px;
height: 30px;
padding: 2px;
margin-right: 30px;
text-align: center;
border-radius: 24%;
}
.checkbox-custom:checked+.checkbox-custom-label:before {
background: #000;
box-shadow: inset 0px 0px 0px 4px #fff;
}
<p class="checkbox">
<input type="checkbox" class="checkbox checkbox-custom" name="cgv" id="cgv" value="1" />
<label class="checkbox-custom-label" for="cgv">I agree to the terms of service</label>
Read the Terms of Service
</p>

Answer 2

i have modified my code
/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
padding-left: 1.95em;
cursor: pointer;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left: 0; top: 0;
width: 1.25em; height: 1.25em;
border: 2px solid #ccc;
background: #fff;
border-radius: 4px;
box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
content: '\2713\0020';
position: absolute;
top: .15em; left: .22em;
font-size: 1.3em;
line-height: 0.8;
color: #09ad7e;
transition: all .2s;
font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
[type="checkbox"]:checked + label:after {
opacity: 1;
transform: scale(1);
}
<p class="checkbox">
<input type="checkbox" class="checkbox checkbox-custom" name="cgv" id="cgv" value="1" {if $checkedTOS}checked="checked" {/if} />
<label class="checkbox-custom-label" for="cgv">{l s='I agree to the terms of service' mod='threepagecheckout'}</label>
{l s='(Read the Terms of Service)' mod='threepagecheckout'}
</p>