How to change a div border color on a checkbox click

I have a custom checkbox that works like a slider. You click the button, it slides across and changes color to green..

Unchecked checkbox

clicked

Checked checkbox

Now, i am trying to figure out, how i could use the same kind of css to change the border color of the surrounding button..

I want to change this border, on checkbox checked

Here is my custom css for the checkbox/slider

.checkbox{
                            position:relative;
                            cursor:pointer;
                            appearance:none;
                            width:37px;
                            height:24px;
                            border-radius:20px;
                            border:2px solid #ccc;
                            outline:none;
                            transition:0.3s;
                            border-color:red;
                        }
                        .checkbox::before{
                            content:"";
                            position:absolute;
                            height:15px;
                            width:15px;
                            border-radius:50%;
                            background:red;
                            top:2px;
                            left:0px;
                            transition:0.3s ease-in-out;
                        }
                        .checkbox:checked::before{
                            transform:translateX(18px);
                            background:green;
                        }
                        .checkbox:checked{
                            border-color:green;
                        }

And implementation of the checkbox/slider

    <div class="float-container">
                                                    <div class="float-child">
                                                        <input type="checkbox" class="checkbox" @onchange="eventArgs => { CheckboxClicked(role.Description, eventArgs.Value); }"/>
                                                    </div>
                                                    <div class="float-child">
                                                        <p>Application Role - </p>
                                                        <br />
                                                        <p><b>@role.Description</b></p>
                                                        <br/>
                                                    </div>
                                                </div>

So, i want to implement the same kind of logic to my float logic - css below 

.float-container {
                            border: 3px solid #fff;
                            padding: 20px;
                        }

                        .float-child {
                            width: 100%;
                            padding: 20px;
                            border: 2px solid seagreen;
                            text-align-last: center;
                        }

I am sure this will be easy for somone who is a whizz at CSS. Im still learning..