トグルボタンにテキストを挿入する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入力{表示：なし;}

/*スライダ*/

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

私はそれが長いコードだと分かっています。しかし、非常に理解しやすい。助けてくれてありがとう。ボディにはJavaScript

でこれを行うには

出典

2016-10-09 Samar Yadav

これは、 '' <フォント色= "白">ものです。あなたはすでにCSSを使用していますが、プレゼンテーションマークアップでコンテンツを汚染するのはなぜですか？ –

何もそれを無視してください。私はそれを解決する方法を見つけようとしていました。投稿中に編集するのを忘れた –

誰かがすぐに答えを投稿しますが、このトグルスイッチのスタイルは既にインターネット上で利用可能です - 例えばhttps://proto.io/freebies/onoff/ コードを見て、かなり簡単に理解できます。 –

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

出典

2016-10-09 21:44:44

最良の方法は、この置く：CSSで

<label class="switch"> 
<input type="checkbox"> 
<div class="slider" id='onoff' data-onoff="on" >swithc off</div> 
</label>

を

color:white; text-align:right;

を.sliderし、入力を交換するために追加します。これで+ .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"); 
} 
    };

出典

2016-10-09 21:26:56 mohade

をチェックさせてください、あなたはこれを試してみませんか？ – mohade

をこのコードを入れjsfiddleです：https://jsfiddle.net/1yymr2kx/5/

ちょうどチェックボックスがクリックされたときに内容を変更する:after要素を追加します。

.slider:after { 
    content:'OFF'; 
    position:relative; 
    padding:10px; 
    padding-left:100px; 
} 

input:checked + .slider:after { 
    content: 'ON'; 
    padding-left:50px; 
}

出典

2016-10-09 21:40:52 Varin

トグルボタンにテキストを挿入するhtml-css

答えて

関連する問題