Creating a custom checkbox using CSS - html

Question

I have the following code for creating custom checkboxes in CSS. Most of it is referenced from W3Schools and works pretty damn well.
.checkbox-container {
display: inline-block;
position: relative;
padding-left: 25px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
line-height: 16px;
}
.checkbox-container input {
/* Hide the default */
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkbox-container .checkmark {
position: absolute;
height: 16px;
width: 16px;
top: 0;
left: 0;
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.4rem;
}
.checkbox-container:hover input~.checkmark {
background-color: #ffffff;
border-color: rgba(0, 0, 0, 0.3);
}
.checkbox-container input:checked~.checkmark {
background-color: #1890ff;
border-color: #1890ff;
}
.checkbox-container .checkmark:after {
content: "";
position: absolute;
display: none;
}
.checkbox-container input:checked~.checkmark:after {
display: block;
}
.checkbox-container .checkmark:after {
left: 5px;
top: 1.5px;
width: 4px;
height: 8px;
border: solid #ffffff;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<div>
<label class="checkbox-container">
Remember me
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div>
Now the problem is, I want to change my markup. In fact I want to simplify it to something like this:
<div class="checkbox-container">
<input type="checkbox" name="remember-checkbox">
<label for="remember-checkbox">Remember me</label>
</div>
However, I can't seem to convert the CSS code to work with the new markup. I have tried converting the .checkmark to label:before, but that does not seem to work. Moreover, is it possible to show the check mark without having the <span> element? Thanks for any help.

Answer 1

You can update like below. Don't forget that for works with ID not name
.checkbox-container {
display: inline-block;
position: relative;
padding-left: 25px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
line-height: 16px;
}
.checkbox-container input {
/* Hide the default */
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkbox-container label {
cursor:pointer;
}
.checkbox-container label:before {
content:"";
position: absolute;
height: 16px;
width: 16px;
top: 0;
left: 0;
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.4rem;
}
.checkbox-container:hover input~label:before {
background-color: #ffffff;
border-color: rgba(0, 0, 0, 0.3);
}
.checkbox-container input:checked~label:before {
background-color: #1890ff;
border-color: #1890ff;
}
.checkbox-container label:after{
content: "";
position: absolute;
display: none;
left: 6px;
top: 1.5px;
width: 4px;
height: 8px;
border: solid #ffffff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkbox-container input:checked~label:after {
display: block;
}
<div class="checkbox-container">
<input type="checkbox" id="remember-checkbox">
<label for="remember-checkbox">Remember me</label>
</div>

Answer 2

Don't need to define id in checkbox input. You can also achieve by css only like checkbox input{ width:100%; height:100%; z-index:2; left:0; top:0 ...}.
You can follow below snippet.
.checkbox-container {
display: inline-block;
position: relative;
padding-left: 25px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
line-height: 16px;
/*border: 1px solid red;*/
}
.checkbox-container input {
/* Hide the default */
position: absolute;
opacity: 0;
cursor: pointer;
height: 100%;
width: 100%;
left: 0;
top: 0;
z-index: 2;
}
.checkbox-container .checkmark{
position: relative;
cursor: pointer;
}
.checkbox-container .checkmark:before {
content: '';
position: absolute;
height: 16px;
width: 16px;
top: 0;
left: -25px;
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.25rem;
}
.checkbox-container:hover input~.checkmark:before {
background-color: #ffffff;
border-color: rgba(0, 0, 0, 0.3);
}
.checkbox-container input:checked~.checkmark:before {
background-color: #1890ff;
border-color: #1890ff;
}
.checkbox-container .checkmark:after{
content: "";
position: absolute;
left: -18.9px;
top: 1.9px;
width: 4px;
height: 8px;
border: solid #ffffff;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(90deg) scale(0);
-ms-transform: rotate(90deg) scale(0);
transform: rotate(90deg) scale(0);
transition: 350ms;
}
.checkbox-container input:checked~.checkmark:after {
opacity: 1;
-webkit-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
}
<div class="checkbox-container">
<input type="checkbox" name="remember-checkbox">
<label class="checkmark">Remember me</label>
</div>