我正在尝试进行切换，以根据其状态显示文本。
我将代码简化为：
.switch {
position: relative;
display: inline-block;
/*(sliderwidth*2 + left)*/
width: 72px;
height: 34px;
}
.slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
}
.slider:before {
/*Its the white box*/
position: absolute;
content: "";
height: 26px;
width: 32px;
left: 4px;
bottom: 4px;
background-color: white;
}
input:checked + .slider {
background-color: #2196F3;
}
input:checked + .slider:before {
transform: translateX(32px);
/*must be same as slider width*/
}<label class="switch">
<input type="checkbox" checked>
<div class="slider"></div>
</label>但是我正在尝试向其中添加文本，例如“开”和“关”。我尝试这样做：
.slider:after {
content:"Off";
}
.slider:before {
content:"On";
}
但是它同时显示了两者，并且看起来非常丑陋。我怎么能只有两个出现之一？
您需要添加一个选择器，以选择是否仅显示相关标签是否选中了输入。您实际上已经具有用于更改颜色的功能。
只需添加到您的CSS中：
input:checked + .slider:after {
content:"Off";
}
input:not(:checked) + .slider:before {
content:"On";
}
该:not选择只是否定了下一条语句，所以当未选中的输入。然后，您可以在此处对文本进行进一步的样式设置。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句