CSSチェックボックススイッチにテキストを追加する

Question

CSSのみを使用するスイッチのように見えるチェックボックスを設計しようとしています.を使用してできるだけ多くのサイズにスケーリングすることができます。

私は本当に鋭く見ていますが、私はスイッチ自体の中に "ON"/"OFF"のようなテキストを追加する機能が欲しいと思います。

は、ここで私がこれまで持っているものです。

JSfiddle：https://jsfiddle.net/rcsngjhm/2/

.switch { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding: 10px; 
 
} 
 
.cmn-toggle { 
 
    position: absolute; 
 
    margin-left: -9999px; 
 
    visibility: hidden; 
 
} 
 
.cmn-toggle + label { 
 
    display: block; 
 
    position: relative; 
 
    cursor: pointer; 
 
    outline: none; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 
input.cmn-toggle-jwr + label { 
 
    width: 3em; 
 
    height: 1.5em; 
 
    background-color: #dddddd; 
 
    -webkit-border-radius: 1.5em; 
 
    -moz-border-radius: 1.5em; 
 
    -ms-border-radius: 1.5em; 
 
    -o-border-radius: 1.5em; 
 
    border-radius: 1.5em; 
 
    overflow: hidden; 
 
} 
 
input.cmn-toggle-jwr + label:before, 
 
input.cmn-toggle-jwr + label:after { 
 
    display: block; 
 
    position: absolute; 
 
    top: 1px; 
 
    left: 1px; 
 
    bottom: 1px; 
 
    content: ""; 
 
} 
 
input.cmn-toggle-jwr + label:before { 
 
    right: 1px; 
 
    background-color: #f1f1f1; 
 
    -webkit-border-radius: 1.5em; 
 
    -moz-border-radius: 1.5em; 
 
    -ms-border-radius: 1.5em; 
 
    -o-border-radius: 1.5em; 
 
    border-radius: 1.5em; 
 
    -webkit-transition: background 0.3s; 
 
    -moz-transition: background 0.3s; 
 
    -o-transition: background 0.3s; 
 
    transition: background 0.3s; 
 
} 
 
input.cmn-toggle-jwr + label:after { 
 
    width: 1.5em; 
 
    width: calc(1.5em - 2px); 
 
    background-color: #fff; 
 
    -webkit-border-radius: 100%; 
 
    -moz-border-radius: 100%; 
 
    -ms-border-radius: 100%; 
 
    -o-border-radius: 100%; 
 
    border-radius: 100%; 
 
    -webkit-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1); 
 
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1); 
 
    -webkit-transition: margin 0.3s; 
 
    -moz-transition: margin 0.3s; 
 
    -o-transition: margin 0.3s; 
 
    transition: margin 0.3s; 
 
} 
 
input.cmn-toggle-jwr:checked + label:before { 
 
    background-color: #8ce196; 
 
} 
 
input.cmn-toggle-jwr:checked + label:after { 
 
    margin-left: 1.5em; 
 
}

<div class="switch"> 
 
    <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-jwr" type="checkbox"> 
 
    <label for="cmn-toggle-1"></label> 
 
</div>

あなたは私がもう少しこれをクリーンアップすることができます任意の方法を参照してください場合にも、私を聞かせてください知っている。

Answer 1

CSSを少し変更して、スイッチ内にテキストを挿入しようとしました。

あなたがするために、テキストをしたいどのように大きなに応じて、あなたはテキストを意味するかなど、フォントサイズ、余白、

See updated fiddle

.em1-0 { 
 
    font-size: 1em; 
 
} 
 

 
.em4-0 { 
 
    font-size: 4em; 
 
} 
 

 
.switch { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding: 10px; 
 
} 
 

 
.cmn-toggle { 
 
    position: absolute; 
 
    margin-left: -9999px; 
 
    visibility: hidden; 
 
} 
 

 
.cmn-toggle + label { 
 
    display: block; 
 
    position: relative; 
 
    cursor: pointer; 
 
    outline: none; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 

 
input.cmn-toggle-jwr + label { 
 
    width: 3em; 
 
    height: 1.5em; 
 
    background-color: #dddddd; 
 
    -webkit-border-radius: 1.5em; 
 
    -moz-border-radius: 1.5em; 
 
    -ms-border-radius: 1.5em; 
 
    -o-border-radius: 1.5em; 
 
    border-radius: 1.5em; 
 
    overflow: hidden; 
 
} 
 

 
input.cmn-toggle-jwr + label:before, 
 
input.cmn-toggle-jwr + label:after { 
 
    display: block; 
 
    position: absolute; 
 
    top: 1px; 
 
    left: 1px; 
 
    bottom: 1px; 
 
    content: ""; 
 
} 
 

 
input.cmn-toggle-jwr + label:before { 
 
    right: 1px; 
 
    background-color: #f1f1f1; 
 
    -webkit-border-radius: 1.5em; 
 
    -moz-border-radius: 1.5em; 
 
    -ms-border-radius: 1.5em; 
 
    -o-border-radius: 1.5em; 
 
    border-radius: 1.5em; 
 
    -webkit-transition: background 0.3s; 
 
    -moz-transition: background 0.3s; 
 
    -o-transition: background 0.3s; 
 
    transition: background 0.3s; 
 
    /* added these four */ 
 
    font-size: 0.75em; 
 
    content:"off"; 
 
    text-align: right; 
 
    padding: 0.25em 0.35em; 
 
} 
 

 
input.cmn-toggle-jwr + label:after { 
 
    width: 1.5em; 
 
    width: calc(1.5em - 2px); 
 
    background-color: #fff; 
 
    -webkit-border-radius: 100%; 
 
    -moz-border-radius: 100%; 
 
    -ms-border-radius: 100%; 
 
    -o-border-radius: 100%; 
 
    border-radius: 100%; 
 
    -webkit-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1); 
 
    -moz-box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1); 
 
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1); 
 
    -webkit-transition: margin 0.3s; 
 
    -moz-transition: margin 0.3s; 
 
    -o-transition: margin 0.3s; 
 
    transition: margin 0.3s; 
 
} 
 

 
input.cmn-toggle-jwr:checked + label:before { 
 
    background-color: #8ce196; 
 
    /* added these two */ 
 
    content: "on"; 
 
    text-align:left; 
 
} 
 

 
input.cmn-toggle-jwr:checked + label:after { 
 
    margin-left: 1.5em; 
 
}

<div class="switch em4-0"> 
 
    <input id="cmn-toggle-0" class="cmn-toggle cmn-toggle-jwr" type="checkbox"> 
 
    <label for="cmn-toggle-0"></label> 
 
</div> 
 

 
<br /> 
 

 
<div class="switch em1-0"> 
 
    <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-jwr" type="checkbox"> 
 
    <label for="cmn-toggle-1">on</label> 
 
</div>