How to create a custom checkbox using css [duplicate]

This question already has an answer here:

• Is there a CSS parent selector? 16 answers

I am creating Custom Check box. For checked checkbox, a tick mark on green background & for Unchecked check box, a cross on red background. I am getting problem in changing background when checkbox is unchecked. I am not getting the parent element. This is what I am trying:

.round-checkbox {position: relative;display: inline-block;vertical-align: -10%;}
.round-checkbox > .box {position: relative;display: block;width: 15px;height: 15px;border: 1px solid #9BD435;background-color: #9BD435;border-radius: 10px;}
.round-checkbox > .box:has(> input:not(:checked)){background-color:red;border-radius:10px;height:15px;width:15px;}
.round-checkbox > .box > .tick {position: absolute; left: 1px; bottom: 5px; width: 10px; height: 5px; border-bottom: 2px solid #FFF; border-left: 2px solid #FFF; 
                                -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); 
                                transform: rotate(-45deg);display: none;}
.round-checkbox > input:checked + .box > .tick {display: block;}
.round-checkbox .horizontal{width: 10px;height: 3px; background-color: white; margin-top: 6px;margin-left: 2px;position: absolute;transform: rotate(45deg);display: none;}
.round-checkbox .vertical{width: 3px;height: 10px;background-color: white;margin-top: 2px;margin-left: 6px;position: absolute;transform: rotate(45deg);display: none;}
.round-checkbox > input:not(:checked) + .box > .horizontal,.round-checkbox > input:not(:checked) + .box > .vertical {display: block;}
.round-checkbox > input {position: absolute;outline: none;left: 0;top: 0;padding: 0;width: 16px;height: 16px;border: none;margin: 0;opacity: 0;z-index: 1;}
.round-checkbox > input:active + .box {border-color: #aaa;background-color: #ddd;}

<span class="round-checkbox">
        <input type="checkbox" checked/> 
    <span class="box">
        <span class="tick"></span>
                <div class="horizontal"></div>
                <div class="vertical"></div>
    </span>    
</span>

I am trying to get parent of the unchecked checkbox here:

 .round-checkbox > .box:has(> input:not(:checked)){background-color:red;border-radius:10px;height:15px;width:15px;}