How to design non fill rounded checkbox using pure css - html

Question

I am making a styled rounded checkbox for woocommerce . The Problem is my checkbox is now fill inside . How Can I make it thin inside without filling?
input#createaccount:checked {
background-color: #253849;
}
input#createaccount{
position: relative;
margin-left: 4px;
width: 25px;
float: left;
margin: 2px 10px 2px 1px;
height: 25px;
border-radius: 50%;
vertical-align: middle;
border: 4px solid #295282;
-webkit-appearance: none;
outline: none;
cursor: pointer;
}
<input class="input-checkbox" id="createaccount" type="checkbox" name="createaccount" value="1">

Answer 1

One way to do this without javascript would be to create one wrapper element with input and one more element as a indicator for checkbox state. That way you can use selector input:checked + nextElement and change style of second element based on checkbox status.
Then you just have to hide checkbox with opacity: 0. With this approach you can also use transitions and transforms on the inner element.
.checkbox-el {
position: relative;
margin-left: 4px;
width: 25px;
float: left;
margin: 2px 10px 2px 1px;
height: 25px;
border-radius: 50%;
vertical-align: middle;
border: 2px solid #295282;
-webkit-appearance: none;
outline: none;
cursor: pointer;
padding: 5px;
}
.checkbox-el input {
width: 100%;
height: 100%;
position: absolute;
top: -3px;
left: -3px;
z-index: 5;
opacity: 0;
cursor: pointer;
}
.checkbox-circle {
position: relative;
border-radius: 50%;
width: 100%;
height: 100%;
z-index: 1;
transform: scale(0.5);
transition: all 0.25s ease-in;
}
.checkbox-el input:checked + .checkbox-circle {
background-color: #253849;
transform: scale(1)
}
<span class="checkbox-el">
<input class="input-checkbox" id="createaccount" type="checkbox" name="createaccount" value="1">
<div class="checkbox-circle"></div>
</span>

Answer 2

Simple adding inner shadow solve the issue
box-shadow: inset 0px 0px 0px 5px #ffffff;
input#createaccount:checked {
background-color: #253849;
box-shadow: inset 0px 0px 0px 5px #ffffff;
transition: 0.5s;
}
input#createaccount{
position: relative;
margin-left: 4px;
width: calc(3em - 4px);
height: calc(3em - 4px);
float: left;
margin: 4px 10px 2px 1px;
border-radius: 50%;
vertical-align: middle;
border: 5px solid #295282;
-webkit-appearance: none;
outline: none;
cursor: pointer;
transition: 0.5s;
}
<input class="input-checkbox" id="createaccount" type="checkbox" name="createaccount" value="1">

Answer 3

Here is another trick with a simple background where you color the content-box and you animate the padding. You will also have transparency:
input#createaccount:checked {
padding:3px;
}
input#createaccount {
width: 25px;
float: left;
margin: 2px 10px 2px 1px;
height: 25px;
border-radius: 50%;
vertical-align: middle;
border: 4px solid #295282;
-webkit-appearance: none;
outline: none;
cursor: pointer;
box-sizing:border-box;
background: #253849 content-box;
padding:8.5px; /* 25/2 - 4 */
transition:0.3s all;
}
body {
background:pink;
}
<input class="input-checkbox" id="createaccount" type="checkbox" name="createaccount" value="1">