Question

我有一个简单的复选框切换，可以在单击或选中时更改背景颜色，表示是否有效。我的问题是我不知道如何在该按钮上贴上标签。

像这样的东西。

我不确定是否可能。

我希望你理解我。

由于

＆＃13;

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

＆＃13;

["a","b","c","d"]

＆＃13;

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来构建我们的开关。这将有两件事

输入所以我们可以将其定位为状态，并将其用于样式和我认为未来的js样式
一个可容纳2件事的标签

2.1打开和关闭文本为before和after的范围

2.2在每个州上滑动的白点

CSS在代码段

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

将toggle.before中的内容更改为内容：＆＃34;隐藏节目＆＃34;;

Answer 3

嗯，只想添加标签？

在.toggle:before

内使用

内容：“隐藏显示”;

而不是

内容：“文字文字”;

感谢。询问更多疑问。

Answer 4

如果您想将文字放在白色圆圈上，则可以在css中添加此文本

.toggle：前{

text-overflow: ellipsis;
overflow: hidden;

}

Answer 5

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

＆＃13;

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

＆＃13;

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

＆＃13;

在切换按钮上显示文本

5 个答案: