单击开关（使用复选框的html切换开关）时，如何删除弹出并消失的背景蓝色？（找到解决方案）

Question

这是我的 html 开关代码

            <div class="switch-container">
                <p>Value1</p>
                <label class="switch">
                    <input type="checkbox">
                    <span class="slider round"></span>
                </label>
                <p>Value2</p>
            </div>

这是 css 文件中元素的样式

/* 
-----------Switch---------
 */
.switch-container{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

/* It contains the actual switch */
.switch{
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* Hide the square box */
.switch input{
    display: none;
    outline: none;
}

/* The slider inside which the circle moves */
.slider{
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
}


/* The moving circle inside the slider */
.slider::before{
    position: absolute;
    content: "";
    height:26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    border-radius: 50%;
    transition: .4s;
}


/* Give the color when selected */
input:checked + .slider{
    background-color: #2196f3;
}

input:focus + .slider{
    outline: none;
    box-shadow: 0 0 1px #2196f3;
}


/* Move the ball on click */
input:checked + .slider:before{
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px)
}

问题：

单击开关时，会弹出一个蓝色框，该框会在开关后面消失。我已经尝试将大纲设置为 none 但它不起作用。

如何去除点击开关时弹出的背景蓝色？

解决方案：

我提供的代码运行良好。有时，当您在开发人员工具中的 google chrome 响应式视图中查看您的网站时，该网站可能会显示一些意外行为。这是因为它会逐步显示您网站的加载情况，而不是最终结果。

Answer 1

试试这个：-

input:checked + .slider{
    background-color: #2196f3;
box-shadow:none;
}

单击开关（使用复选框的html切换开关）时，如何删除弹出并消失的背景蓝色？ （找到解决方案）

How to remove background blue color that pops up and goes when the switch(html toggle switch using checkbox) is clicked? (Solution found)

html

css

checkbox

这是我的 html 开关代码

这是 css 文件中元素的样式

问题：

解决方案：

单击开关（使用复选框的html切换开关）时，如何删除弹出并消失的背景蓝色？（找到解决方案）