如何更改复选框单击时的 div 边框颜色

Question

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..

EDIT****

So it looks like this can only be done in JS, judging by the comments.. I haven't used js yet, but id be greatful for the help.. So i guess the JS needs to know, when i have selected the checkbox, to change the color of my border in float-child.

UPDATE ***

So i figured it out using Javascript - using this script to replace css items when the checkbox was checked - But having other issues, i guess my foreach loop needs unique id's.. not sure how to achieve it, in a dynamic list.. But this code below may help some one, whos not working with dynamic.

First add id's to the elements you want changing

<div class="float-child" Id="floatdiv">
<input type="checkbox" Id="checkbox" class="checkbox">

And then my javascript to change the css elements..

function BorderColorChangeOnCheckboxClick(){
    $('[id*=checkbox]').click(function () {
        if ($(this).is(":checked")) {
            $("#floatdiv").css("width", "100%");
            $("#floatdiv").css("padding", "20px");
            $("#floatdiv").css("border", "2px solid red");
            $("#floatdiv").css("text-align-last", "center");
        }
        
        else {
            $("#floatdiv").css("width", "100%");
            $("#floatdiv").css("padding", "20px");
            $("#floatdiv").css("border", "2px solid seagreen");
            $("#floatdiv").css("text-align-last", "center");
        }
    });
};

Don't forget, if you are working with Blazor.. To add the javascript file to your host files, and also make the JS interop call within your code.. ie

protected override async Task OnAfterRenderAsync(bool firstRender)
            {
                await Js.InvokeVoidAsync("search");
                await Js.InvokeVoidAsync("BorderColorChangeOnCheckboxClick");
    
            }

Hope this will help someone in the future..

So back to my code -

FULL CODE

<div hidden="@IsShow" class="text-center-middle">
                        <div class="text-left mb-3">
                            <div class="col-lg-12 control-section">
                                <div class="control_wrapper">
                                    @if (AppRolesDetails != null)
                                    {
                                        foreach (var role in AppRolesDetails)
                                        {
                                            <div class="float-container">
                                                <div class="float-child">
                                                    <input type="checkbox" Id="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>

                                            AppOwnerCommonName = role.CommonName;
                                        }
                                    }
                                </div>
                            </div>
                        </div>
                    </div>

CSS

<style>
                        .text-center-middle { margin-left: 58px; 
                        }
                        .checkbox {
                            appearance: none;
                            border: 2px solid #ccc;
                            border-color: red;
                            border-radius: 20px;
                            cursor: pointer;
                            height: 24px;
                            outline: none;
                            position: relative;
                            transition: 0.3s;
                            width: 37px;
                        }

                        .checkbox::before {
                            background: red;
                            border-radius: 50%;
                            content: "";
                            height: 15px;
                            left: 0px;
                            position: absolute;
                            top: 2px;
                            transition: 0.3s ease-in-out;
                            width: 15px;
                        }

                        .checkbox:checked::before {
                            background: green;
                            transform: translateX(18px);
                        }

                        .checkbox:checked { border-color: green; }

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

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

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

                        .box-color-change {
                            border: 2px solid seagreen;
                            padding: 20px;
                            text-align-last: center;
                            width: 100%;
                        }
                    </style>

Answer 1

You absolutely don't need JavaScript for that!

There's a trick to style form elements however you dream of. You just need to put your element right after the native input and wrap both with <label> to make it clickable:

<label>
    <input type="checkbox" class="checkbox-native">
    <i class="checkbox-custom"></i>
</label>

Then, you can change the appearance of your custom element when the native checkbox is checked:

.checkbox-native {
    display: none;
}

.checkbox-custom {
    display: inline-block;
    /* some general style */
}

:checked + .checkbox-custom {
    /* style only applicable when checked */
}

Answer 2

You don't need any JS or jumping through hoops backwards CSS.

You're creating a custom control, so build a component to represent it. I've not included your Css etc to keep the answer short, just used standard Bootstrap.

MyCheckBox.razor

<span class="p-2 border @borderColor">
    <input type="checkbox" checked="@_currentValue" @onchange="Changed" />
</span>

@code {
    [Parameter] public bool Value { get; set; }
    [Parameter] public EventCallback<bool> ValueChanged { get; set; }

    private string borderColor => _currentValue ? "border-success" : "border-danger";
    private bool _currentValue;

    protected override void OnInitialized()
    => _currentValue = this.Value;

    private async Task Changed(ChangeEventArgs e)
    {
        _currentValue = (bool)e.Value;
        if (ValueChanged.HasDelegate)
            await ValueChanged.InvokeAsync(_currentValue);
    }
}

MyCheckBox.razor.css

/*Add your custom css here */

Test page

@page "/"
<div class="m-2 p-2">
    <MyCheckBox Value="value" ValueChanged="this.ValueChanged"></MyCheckBox>
</div>
<div class="m-2 p-2">
    @this.value
</div>

@code {
    bool value;

    private void ValueChanged(bool value)
        {
        this.value = value;
        }

}