1. 首页
  2. 问答
  3. 如何将文本“ON”和“OFF”添加到切换按钮

如何将文本“ON”和“OFF”添加到切换按钮

2016-10-04 190 views
7

在我的项目中，我想在现有的切换代码上添加一个文本。所以我想这样，当切换ON时应该显示文本“ON”如果关闭，则显示“OFF”文本。我无法将其更改为其他切换，因为它已经有一个使用它的后端。我只想输入“ON”和“OFF”文本。谢谢。如何将文本“ON”和“OFF”添加到切换按钮

这里是我的代码 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%;

来源

2016-10-04 KennethLazos

回答

-3

试试这个

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

 
.switch input {display:none;} 
 

 
.slider { 
 
    position: absolute; 
 
    cursor: pointer; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background-color: #ccc; 
 
    -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: #2196F3; 
 
} 
 

 
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%; 
 
}
<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Untitled Document</title> 
 
</head> 
 

 
<body> 
 

 
<h2>Toggle Switch</h2> 
 

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

 
<label class="switch"> 
 
    <input type="checkbox" checked> 
 
    <div class="slider"></div> 
 
</label><br><br> 
 

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

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

 
</body> 
 
</html>

来源

2016-10-04 07:16:29 vinit

+0

只是想在按钮主控上添加“ON”和“OFF”文本:) – KennethLazos

+0

@KennethLazos询问文本不仅仅是切换 – MJK

17

你可以做这样的：

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

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

来源

2016-10-04 07:31:04 Goombah

+1

如何设置基于条件的表单加载后以编程方式检查的值？我已经使用了你的答案的纯css版本和新的web开发。 –

+1

得到我的答案，使用一个变量，并在输入标签内使用内嵌的PHP回声..感谢。 –

相关问题

 相关问题