Style HTML Checkbox

checkbox

<style>
 input[type=checkbox] {
    display: none;
}

input[type=checkbox] + label {
    display: inline-block;
    position: relative;
    padding: 6px;
    background-color: white;
    border: 1px solid lightgray; /* border of the checkbox */
    border-radius: 3px
}

input[type=checkbox]:checked + label {
    background-color: blue; /* whatever you want the background color of the box to be */
    color: white;
}

input[type=checkbox]:checked + label:after {
    position: absolute;
    left: 2px;
    top: 0px;
    color: white; /* Color of the checkmark */
    content: '\2714'; /* This is a "heavy" checkmark. Change to 2713 for a light one. */
    font-size: 10px;
} 
</style>

<input type="checkbox" id="action"><label for="action"></label> hi

Awesome, thanks!