如何添加文字“ON”和“OFF”切换按钮 [英] How to add the text "ON" and "OFF" to toggle button
本文介绍了如何添加文字“ON”和“OFF”切换按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在我的项目中,我想在现有的切换代码上添加一个文本。所以我希望这样,当切换为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屋!
查看全文