在切換按鈕html-css中插入文本
[英]Insert text in toggle button html-css
問題描述
我有這個。
我要這個。
這是一個很長的代碼。 我真的不想發布它。 但在這里
HTML：
<!DOCTYPE html>
<html>
<head>
<title>check</title>
<link rel="stylesheet" type="text/css" href="main2.css">
</head>
<body>
<label class="switch">
<input type="checkbox">
<div class="slider"></div>
</label>
</body>
</html>
現在css代碼是：
.switch {
position: relative;
display: inline-block;
width: 180px;
height: 34px;
}
/ *隱藏默認HTML復選框* / .switch input {display：none;}
/ *滑塊* /
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: red;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 36px;
width: 60px;
left:0px;
bottom: -1px;
top: -1px;
background-color: black;
-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(120px);
-ms-transform: translateX(120px);
transform: translateX(120px);
}
我知道這是一個很長的代碼。 但很容易理解。 謝謝你的幫助。
3 個解決方案
解決方案1
2 已采納 2016-10-09 21:44:44
.switch { position: relative; display: inline-block; width: 180px; height: 34px; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: red; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: "aaa"; height: 36px; width: 60px; left:0px; bottom: -1px; top: -1px; background-color: black; -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(120px); -ms-transform: translateX(120px); transform: translateX(120px); } .text { color: white; } .text:after { position: absolute; top: 7px; right: 25px; content: "Switch off"; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .text:before { position: absolute; top: 7px; left: 25px; content: "Switch on"; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } input + .slider + .text:after { opacity: 1; } input + .slider + .text:before { opacity: 0; } input:checked + .slider + .text:after { opacity: 0; } input:checked + .slider + .text:before { opacity: 1; }
<!DOCTYPE html> <html> <head> <title>check</title> <link rel="stylesheet" type="text/css" href="main2.css"> </head> <body> <label class="switch"> <input type="checkbox"> <div class="slider"></div> <div class="text"></div> </label> </body> </html>
解決方案2
1 2016-10-09 21:40:52
這是jsfiddle： https ：//jsfiddle.net/1yymr2kx/5/
只需添加:after單擊復選框:after更改內容的元素:after 。
.slider:after {
content:'OFF';
position:relative;
padding:10px;
padding-left:100px;
}
input:checked + .slider:after {
content: 'ON';
padding-left:50px;
}
解決方案3
0 2016-10-09 21:26:56
用javascript做到這一點的最好方法
身體里放這個：
<label class="switch">
<input type="checkbox">
<div class="slider" id='onoff' data-onoff="on" >swithc off</div>
</label>
在css中添加.slider
color:white; text-align:right;
並替換輸入：選中+ .slider與此：
input:checked + .slider {
background-color: #2196F3;
text-align:left;
}
嵌入.js文件並將此代碼放入其中
var slider = document.getElementById('onoff');
slider.onclick = function () {
var show = slider.getAttribute("data-onoff");
if(show=='on'){
slider.getElementById("content").innerHTML ="switch on";
slider.setAttribute("data-onoff","off");}
else {
slider.getElementById("content").innerHTML ="switch off";
slider.setAttribute("data-onoff","on");
}
};
帶有 html-css 的文本 alignment
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.