在切换按钮上显示文本

Question

我有一个简单的复选框切换，可以在单击或选中时更改背景颜色，指示是否处于活动状态。我的问题是我不知道如何在那个按钮上贴标签。

类似的东西。

我不确定这是否可能。

希望你能理解我。

谢谢

CODEPEN

body{
  background-color: #ddd;
}
.toggle {
  -webkit-appearance: none;
  appearance: none;
  width: 65.57px;
  padding: 10px;
height: 26.32px;
  display: inline-block;
  position: relative;
  border-radius: 13px;
  overflow: hidden;
  line-height: 16px;
  text-align: center;
font-size: 12px;
  outline: none;
  border: none;
  cursor: pointer;
  background: #E1F6FF;
  transition: background-color ease 0.3s;
}

.toggle:before {
  content: "text text";
  display: block;
  position: absolute;
  z-index: 2;
  width: 24px;
height: 24px;
  background: #fff;
  left: 0;
  top: 0;
  border-radius: 50%;
  padding-top: 5px;
  text-indent: -30px;
  word-spacing: 37px;
  color: #4D5585;
  text-shadow: -1px -1px rgba(0,0,0,0.15);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
}

.toggle:checked {
  background: #dadce8;
}

.toggle:checked:before {
  left: 40px;
}

.center{
  text-align: center;
}

<div class="center">
  
  <input class="toggle" type="checkbox" />
  
  </center>

Answer 1

为了在编辑后达到期望的结果，我们将构建一些新的东西。

HTML

<div class="switch">
  <input type="checkbox" name="switch" class="switch-checkbox" id="myswitch" checked>
  <label class="switch-labels" for="myswitch">
        <span class="switch-text"></span>
        <span class="switch-dot"></span>
    </label>
</div>

我们将使用 switch 类的主 div 来构建我们的开关。这将容纳两件事

1. 输入，因此我们可以定位它状态并用于样式和我认为未来的 js 样式

2. 一个可以容纳 2 个东西的标签

   2.1 跨度的before 和after 的开启和关闭文本

   2.2 在每个状态上滑动的白点

CSS在sn-p上的注释

希望这就是您想要的。如果需要，很乐意解释或帮助提供更好的解决方案。

body {
  background-color: #ddd;
}


/*Style main div and remove default checkbox*/

.switch {
  position: relative;
  width: 75px;
  margin: 0 auto;
}

.switch-checkbox {
  display: none;
}


/*Style words and oval switch */

.switch-labels {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border-radius: 20px;
}

.switch-text {
  display: block;
  width: 200%;
  margin-left: -100%;
  transition: margin 0.3s ease-in 0s;
}

.switch-text:before,
.switch-text:after {
  float: left;
  width: 50%;
  line-height: 30px;
  color: white;
  box-sizing: border-box;
}

.switch-text:before {
  content: "ON";
  padding-left: 10px;
  background-color: #E1F6FF;
  color: #000000;
}

.switch-text:after {
  content: "OFF";
  padding-right: 10px;
  background-color: #4D5585;
  color: #FFFFFF;
  text-align: right;
}


/*Style center dot*/

.switch-dot {
  width: 30px;
  height: 30px;
  background: #FFFFFF;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 41px;
  margin-right: 5px;
  border-radius: 20px;
  transition: all 0.3s ease-in 0s;
}

.switch-dot:after{
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-size: cover;
    background-image: url('http://www.free-icons-download.net/images/multiply-icon-27981.png');
    margin: 5px 0 0 5px;
}


/*State changer*/

.switch-checkbox:checked+.switch-labels .switch-text {
  margin-left: 0;
}

.switch-checkbox:checked+.switch-labels .switch-dot {
  right: 0px;
  margin-right: 0px;
}

<div class="switch">
  <input type="checkbox" name="switch" class="switch-checkbox" id="myswitch" checked>
  <label class="switch-labels" for="myswitch">
        <span class="switch-text"></span>
        <span class="switch-dot"></span>
    </label>
</div>

Answer 2

如果你想把文字放在白色圆圈的意思上，你可以在css中添加这个

.toggle:之前{

text-overflow: ellipsis;
overflow: hidden;

}

Answer 3

好吧，只是想添加标签？

在下面使用.toggle:before

内容：“隐藏节目”；

改为

内容：“文本文本”；

谢谢。询问更多问题。

Answer 4

将内容中的文本更改为 toggle.before 内容：“隐藏节目”；

Answer 5

我不确定我是否正确理解了您的问题。您的意思是添加一个 lebal 来切换此复选框？

body{
  background-color: #ddd;
}
.toggle {
  -webkit-appearance: none;
  appearance: none;
  width: 65.57px;
  padding: 10px;
height: 26.32px;
  display: inline-block;
  position: relative;
  border-radius: 13px;
  overflow: hidden;
  line-height: 16px;
  text-align: center;
font-size: 12px;
  outline: none;
  border: none;
  cursor: pointer;
  background: #E1F6FF;
  transition: background-color ease 0.3s;
}

.toggle:before {
  content: "text text";
  display: block;
  position: absolute;
  z-index: 2;
  width: 24px;
height: 24px;
  background: #fff;
  left: 0;
  top: 0;
  border-radius: 50%;
  padding-top: 5px;
  text-indent: -30px;
  word-spacing: 37px;
  color: #4D5585;
  text-shadow: -1px -1px rgba(0,0,0,0.15);
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
}

.toggle:checked {
  background: #dadce8;
}

.toggle:checked:before {
  left: 40px;
}

.center{
  text-align: center;
}

<div class="center">
  
  <input id="sample" class="toggle" type="checkbox" />
  <label for="sample">This is a sample</label>
  
  </center>