在切换按钮上显示文本

Question

我有一个简单的复选框切换按钮，当单击或选中时它会更改背景颜色，指示活动与否。我的问题是我不知道如何在该按钮上放置标签。

像这样。

我不确定这是否可能。

希望你能理解我。

谢谢

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

我不确定我是否正确理解你的问题。您是说添加一个 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>

Answer 2

将 toggle.before 的内容中的文本更改为内容："hide show"；

Answer 3

嗯，只想添加标签？

在下面使用 .toggle:before

content: "Hide Show";

改为

content: "text text";

谢谢。询问更多问题。

Answer 4

如果你想把文字放在白圈的意思上，你可以在css

中添加这个

.切换：之前{

text-overflow: ellipsis;
overflow: hidden;

}

Answer 5

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

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>

我们将使用主 div 和 class switch 来构建我们的开关。这将容纳 2 个东西

我们可以将输入作为目标状态并将其用于样式和我认为未来的 js 样式
一个标签可以容纳 2 个东西

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

2.2 各状态滑动的白点

CSS 对片段发表了评论

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

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>

在切换按钮上显示文本

display text on toggle button

css

checkbox

toggle