如何添加文字“ON”和“OFF”切换按钮 [英] How to add the text "ON" and "OFF" to toggle button

问题描述

在我的项目中，我想在现有的切换代码上添加一个文本。所以我希望这样，当切换为ON时，应该显示文本ON并显示OFF文本（如果切换）。我无法将其更改为其他切换，因为它已经有一个使用它的后端。我只想输入ON和OFF文本。谢谢。
$ b

以下是我的代码
HTML：

 < label class =switch>< input type =checkboxid =togBtn>< div class =slider round>< / span>< / div>< /标签> 
  

CSS：

  .switch input {display：none;} 
 
 .slider {
 position：absolute; 
光标：指针; 
 top：0; 
剩下：0; 
 right：0; 
 bottom：0; 
背景颜色：＃ca2222; 
 -webkit-transition：.4s; 
转换：.4s; 
} 
 
 .slider：在{
位置：绝对; 
 content：; 
 height：26px; 
 width：26px; 
 left：4px; 
 bottom：4px; 
背景颜色：白色; 
 -webkit-transition：.4s; 
转换：.4s; 
} 
 
输入：checked + .slider {
 background-color：＃2ab934; 
} 
 
输入：focus + .slider {
 box-shadow：0 0 1px＃2196F3; 
} 
 
 input：checked + .slider：before {
 -webkit-transform：translateX（26px）; 
 -ms-transform：translateX（26px）; 
 transform：translateX（26px）; 
} 
 
 / *圆滑块* / 
 .slider.round {
 border-radius：34px; 
} 
 
 .slider.round：之前{
 border-radius：50％; 
  

解决方案

您可以这样做：

.switch {position：relative;显示：inline-block;宽度：90px; height：34px;}。switch input {display：none;}。slider {position：absolute;光标：指针; top：0;左：0;正确：0;底部：0; background-color：＃ca2222; -webkit转换：.4s; transition：.4s;}。slider：before {position：absolute;内容：;身高：26px;宽度：26px; left：4px;底部：4px;背景颜色：白色; -webkit转换：.4s;输入：checked + .slider {background-color：＃2ab934;} input：focus + .slider {box-shadow：0 0 1px＃2196F3;} input：checked + .slider：before {-webkit -transform：translateX（55px）; -ms-transform：translateX（55px）; transform：translateX（55px）;} / * ------ ADDED CSS --------- * /。on {display：none;}。on，.off {color：white;位置：绝对;变换：翻译（-50％， - 50％）;顶部：50％;剩下：50％; font-size：10px; font-family：Verdana，sans-serif;} input：checked + .slider .on {display：block;} input：checked + .slider .off {display：none;} / * --------- END -------- * // *圆形滑块* /。slider.round {border-radius：34px;}。slider.round：before {border-radius：50％;}

< label class =switch>< input type =checkboxid =togBtn>< div class =slider round><！ - ADDED HTML - >< span class =on> ON< / span>< span class =off > OFF< /跨度><！ - END - >< / DIV>< /标签>

或者纯CSS：

  .switch {position：relative;显示：inline-block;宽度：90px; height：34px;}。switch input {display：none;}。slider {position：absolute;光标：指针; top：0;左：0;正确：0;底部：0; background-color：＃ca2222; -webkit转换：.4s;过渡：.4s; border-radius：34px;}。slider：before {position：absolute;内容：;身高：26px;宽度：26px; left：4px;底部：4px;背景颜色：白色; -webkit转换：.4s;过渡：.4s; input：checked + .slider：before {}; input：checked + .slider {background-color：＃2ab934;} input：focus + .slider {box-shadow：0 0 1px＃2196F3;} input： -webkit-transform：translateX（26px）; -ms-transform：translateX（26px）; transform：translateX（55px）;} / * ------ ADDED CSS --------- * /。slider：after {content：'OFF';白颜色;显示：块;位置：绝对;变换：翻译（-50％， -  50％）;顶部：50％;剩下：50％; font-size：10px; font-family：Verdana，sans-serif;} input：checked + .slider：after {content：'ON';} / * --------- END -------- * /  

< label class =switch>< input type =checkboxid =togBtn>< div class =slider round>< / div>< / label>

On my project I wanted to add a text on my existing toggle code.So I wanted like this, When toggles ON it should display the text "ON" and display the "OFF" text if toggles off. I can't change it to other toggle because it's already have a backend using it. I just wanted only to input "ON" and "OFF" text. Thank you.

Here is my code HTML:

<label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"></span></div></label>

CSS:

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2ab934;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;

解决方案

You could do it like this:

.switch {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2ab934;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(55px);
  -ms-transform: translateX(55px);
  transform: translateX(55px);
}

/*------ ADDED CSS ---------*/
.on
{
  display: none;
}

.on, .off
{
  color: white;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
  font-size: 10px;
  font-family: Verdana, sans-serif;
}

input:checked+ .slider .on
{display: block;}

input:checked + .slider .off
{display: none;}

/*--------- END --------*/

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;}

<label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"><!--ADDED HTML --><span class="on">ON</span><span class="off">OFF</span><!--END--></div></label>

Or pure CSS:

.switch {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: .4s;
  transition: .4s;
   border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2ab934;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(55px);
}

/*------ ADDED CSS ---------*/
.slider:after
{
 content:'OFF';
 color: white;
 display: block;
 position: absolute;
 transform: translate(-50%,-50%);
 top: 50%;
 left: 50%;
 font-size: 10px;
 font-family: Verdana, sans-serif;
}

input:checked + .slider:after
{  
  content:'ON';
}

/*--------- END --------*/

<label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"></div></label>

这篇关于如何添加文字“ON”和“OFF”切换按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！