时间戳

首页 > 解决方案 > 如何在复选框单击时更改 div 边框颜色

javascript - 如何在复选框单击时更改 div 边框颜色

问题描述

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

未选中的复选框

点击

选中的复选框

现在，我想弄清楚，我如何使用相同类型的 css 来更改周围按钮的边框颜色..

我想更改此边框，选中复选框

这是我的复选框/滑块的自定义 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;
                        }

以及复选框/滑块的实现

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

标签： javascripthtmlcsscheckboxblazor

解决方案

你绝对不需要 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 */
}

推荐阅读