Style Checkbox after Label with CSS - html

Question

I have a Label and an Checkbox Input after it JS Fiddle Example:
<label for="accept">Accept</label>
<input id="accept" type="checkbox">
I need to style the checkbox so I tried the following:
<label for="accept">Accept</label>
<input id="accept" type="checkbox">
In this case the checkbox stops working and I am able to style it.
Then I swapped the position of Label and Checkbox Input:
<input id="accept" type="checkbox">
<label for="accept">Accept</label>
In this case it is working, styled, but the input and label appear in same line.
I would like to style the checkbox input and have the label and checkbox in different lines.
The CSS is the following:
input[type="checkbox"] {
opacity: 0;
}
label {
position: relative;
display: block;
padding-left: 22px;
}
label::before, label::after {
position: absolute;
content: "";
display: block;
}
label::before{
height: 16px;
width: 16px;
border: 1px solid;
left: 0px;
top: 3px;
}
label::after {
height: 5px;
width: 9px;
border-left: 2px solid;
border-bottom: 2px solid;
transform: rotate(-45deg);
left: 4px;
top: 7px;
}
input[type="checkbox"] + label::after {
content: none;
}
input[type="checkbox"]:checked + label::after {
content: "";
}
input[type="checkbox"]:focus + label::before {
outline: rgb(59, 153, 252) auto 5px;
}
Note: On my examples I also wasn't able to vertically align the checkbox with the label.

Answer 1

form input[type="checkbox"] {
opacity: 0;
}
form .checkicon {
position: relative;
display: block;
height: 16px;
width: 16px;
border: 1px solid;
margin-bottom:5px;
}
form .checkicon::after {
position: absolute;
content: "";
display: block;
}
form .checkicon::after {
height: 5px;
width: 9px;
border-left: 2px solid;
border-bottom: 2px solid;
transform: rotate(-45deg);
left: 3px;
top:3px
}
form input[type="checkbox"] + .checkicon::after {
content: none;
}
form input[type="checkbox"]:checked + .checkicon::after {
content: "";
}
form input[type="checkbox"]:focus + .checkicon::before {
outline: rgb(59, 153, 252) auto 5px;
}
div label {
display: block;
}
h4 { margin: 12px 0; }
<form>
<input id="accept1" type="checkbox">
<label class="checkicon" for="accept1"></label>
<label>Accept</label>
</form>
this is it ! hope this help!

Answer 2

JSFiddle Link: https://jsfiddle.net/dh72qb5f/12/
HTML
<div>
<label for="accept1">
<input id="accept1" type="checkbox">
<span class="checkbox-custom"></span>
Accept
</label>
</div>
CSS:
input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
}
div{
position: relative;
}
label {
margin-left: 25px;
}
.checkbox-custom {
position: absolute;
top: 0px;
left: 0px;
height: 12px;
width: 12px;
background-color: transparent;
border-radius: 5px;
border: 2px solid #ccc;
}
.checkbox-custom::after {
position: absolute;
content: "";
left: 12px;
top: 12px;
height: 0px;
width: 0px;
border-radius: 5px;
border: solid #ccc;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(0deg) scale(0);
-ms-transform: rotate(0deg) scale(0);
transform: rotate(0deg) scale(0);
opacity: 1;
}
input:checked ~ .checkbox-custom {
background-color: #ccc;
border-radius: 5px;
transform: rotate(0deg) scale(1);
opacity: 1;
border: 2px solid #ccc;
}
input:checked ~ .checkbox-custom::after {
transform: rotate(45deg) scale(1);
opacity: 1;
left: 3px;
top: 0px;
width: 4px;
height: 8px;
border: solid #ffffff;
border-width: 0 2px 2px 0;
background-color: transparent;
border-radius: 0;
}