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

Question

我有一个像滑块一样工作的自定义复选框。您单击该按钮，它会滑过并将颜色更改为绿色..

Unchecked checkbox

点击

Checked checkbox

现在，我想弄明白，如何使用同一种 css 来更改周围按钮的边框颜色..

I want to change this border, on checkbox checked

这是我为checkbox/slider

定制的css

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

并执行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;
                        }

我相信这对于 CSS 的高手来说会很容易。我还在学习中..

编辑****

所以看起来这只能在 JS 中完成，从评论来看..我还没有使用过 js，但我很感激你的帮助..所以我想 JS 需要知道，什么时候我选中了复选框，以更改 float-child 中边框的颜色。

更新***

所以我使用 Javascript 想通了 - 使用此脚本在复选框被选中时替换 css 项目 - 但是还有其他问题，我想我的 foreach 循环需要唯一的 id.. 不是确定如何在动态列表中实现它。但是下面的代码可能会帮助一些不使用动态的人。

首先将 id 添加到您要更改的元素

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

然后我的 javascript 更改 css 元素..

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");
        }
    });
};

不要忘记，如果您正在使用 Blazor.. 将 javascript 文件添加到您的主机文件，并在您的代码中进行 JS 互操作调用.. 即

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

希望这对以后的人有所帮助..

所以回到我的代码 -

完整代码

<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

你绝对不需要 JavaScript！

有一个技巧可以让表单元素的样式随心所欲。您只需要将您的元素放在本机输入之后，并用 <label> 包裹起来使其可点击：

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

然后，您可以在选中本机复选框时更改自定义元素的外观：

.checkbox-native {
    display: none;
}

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

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

Answer 2

您不需要任何 JS 或向后跳圈 CSS。

您正在创建自定义控件，因此构建一个组件来表示它。我没有包括你的 Css 等以保持简短的答案，只是使用标准 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 */

测试页

@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;
        }

}

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

How to change a div border color on a checkbox click

html

javascript

css

checkbox

blazor