这是我为交换机编写的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)
}
问题：
当点击开关时，会弹出一个蓝色框，并在开关后面消失。我已经试着把大纲设定为没有，但它不起作用。
如何删除点击开关时弹出的背景蓝色色调？
解决方案：
我提供的代码运行良好。有时，当你在开发者工具中的谷歌chromes响应视图中查看你的网站时，网站可能会显示出一些意想不到的行为。这是因为它显示的是你网站的逐步加载，而不是最终结果。
试试这个：-
input:checked + .slider{
background-color: #2196f3;
box-shadow:none;
}