how can i style checkbox using CSS?

You cannot directly apply CSS to checkbox, In that in modern browsers, we can use only CSS to style checkbox, in older browser you need the support of javascript also.

Let's go for CSS only solution first

<input type="checkbox" id="c1" name="cc" />
<label for="c1">
    <span></span>Check Box 1
</label>

CSS code for it

/*hide the actual checkbox.*/
input[type="checkbox"] {
    display:none;
}

input[type="checkbox"] + label {
    color:#f2f2f2;
}
/*show background as sprite sheet for checkbox, so here we what we have to do is set the background position on this span, which is image*/
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

/*change background image using sprite*/
input[type="checkbox"]:checked + label span {
    background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/check_radio_sheet.png) -19px top no-repeat;
}

here what were are using this code

input[type="checkbox"]:checked + label {
 
}

with the help of CSS3 pseudocode  we are able to check the status of checkbox(if it is checked or unchecked), if it is checked we are selecting the element directly following the checkbox or radio using +

With the help of above code, we are toggling the CSS sprite images, the complete image is here

here is the actual Source and Codepen link

Style checkbox using CSS and Font-Awesome

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" >

<span class="bigcheck">
    <label class="bigcheck">Custom Check
        <input type="checkbox" class="bigcheck" name="CustomCheck" value="yes"/>
        <span class="bigcheck-target"></span>
    </label>
</span>

CSS

span.bigcheck-target {
    font-family: FontAwesome; /* use an icon font for the checkbox */    
}
input[type='checkbox'].bigcheck {     
    position: relative;
    left: -999em; /* hide the real checkbox */
}

input[type='checkbox'].bigcheck + span.bigcheck-target:after {
    content: "\f096"; /* font-awesome code for check */
}
input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after {
    content: "\f046"; /* font-awesome code for checked box (fa-check-square-o) */
}

Output:

https://jsfiddle.net/tbekwfyh/

Above answer is correct to style checkbox using CSS, but here is another solution and to understand it in a better way.

Basically we are toggling the HTML for attribute on <label> matches the id on <input>, so clicking on the <label> will toggle the <input> checkbox.So it will be like

<input id="toggle" type="checkbox">
<label for="toggle">

then we are hiding the <input> using

input {
    position: absolute;
    left: -9999px;
}

Now, we need to convey the checked/unchecked state, which we can do that with <label>, as input is already hidden, using the code

input:checked + label {
    /*styles */
}

combination of the :checked pseudo-class and the + adjacent sibling selector means “when the checkbox is checked, find the <label> right after it and apply styles”

In this way, we achieve the styling of checkbox using radio button, here is the full description and source of my answer, which is easy to understand.

Change checkbox color using CSS accent-color property

.colored-input {
    accent-color: #9d3039;
    height: 20px; /* not needed */
    width: 20px; /* not needed */
}

and HTML

<input class="colored-input" type="checkbox" />

<!-- Radio button example -->
<input class="colored-input" type="radio" />

Fiddle output:

https://jsfiddle.net/840axkcm/1/

Source: Style checkbox and radio button using CSS

Thanks