Question

我正在尝试使用它显示文本，具体取决于它的状态。

我将代码简化为：

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

但它显示了它们，看起来真的很难看。我怎么能只出现2个中的一个？

https://jsfiddle.net/zsm0qkw9

Answer 1

您需要添加选择器以确定是否选中输入以仅显示相关标签。你实际上已经有了改变颜色的方法。

只需添加到您的CSS：

input:checked + .slider:after {
   content:"Off";
} 
input:not(:checked) + .slider:before {
   content:"On";
}

:not选择器只是否定下一个语句，所以当未检查输入时。然后，您可以在此处进一步设置文本样式。

JSFiddle Example

Answer 2

如果你使用JQuery

$('input[type=checkbox]').change(function(){
   var labelStr = this.attr('checked') ? 'On' : 'Off';
   $('slider').attr('data-content', labelStr);
});

和你的CSS

.slider:after {
    content: attr(data-content)
}

将文字添加到复选框切换

2 个答案: