トグルlable

イムスイッチはopenSwitch Closedを表示した後、私は、この2つのタイプOpenとclosedSwitch Openある、あなたは私の問題を理解することができimage 02image 01を見て、スイッチの後ろにスイッチopenとcloseラベルを配置する必要がありますし、Toggle Switchを使用しましたClosedは、私がトグルlable

おかげ

この問題を解決するために助けてください、私はそれを修正することができますどのように取り組んでスニペット、を見てください210

画像01 - 現在のビュー

画像02 - 私はこの

.onoffswitch1 { 
 
    position: relative; width: 90px; 
 
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; 
 
} 
 

 
.onoffswitch1-checkbox { 
 
    display: none; 
 
} 
 

 
.onoffswitch1-label { 
 
    display: block; overflow: hidden; cursor: pointer; 
 
    border: 2px solid #999999; border-radius: 30px; 
 
} 
 

 
.onoffswitch1-inner { 
 
    display: block; width: 200%; margin-left: -100%; 
 
    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s; 
 
    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s; 
 
} 
 

 
.onoffswitch1-inner:before, .onoffswitch1-inner:after { 
 
    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; 
 
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; 
 
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
 
    border-radius: 30px; 
 
    box-shadow: 0px 15px 0px rgba(0,0,0,0.08) inset; 
 
} 
 

 
.onoffswitch1-inner:before { 
 
    content: "YES"; 
 
    padding-left: 10px; 
 
    background-color: #2FCCFF; color: #FFFFFF; 
 
    border-radius: 30px 0 0 30px; 
 
} 
 

 
.onoffswitch1-inner:after { 
 
    content: "NO"; 
 
    padding-right: 10px; 
 
    background-color: #EEEEEE; color: #999999; 
 
    text-align: right; 
 
    border-radius: 0 30px 30px 0; 
 
} 
 

 
.onoffswitch1-switch { 
 
    display: block; width: 30px; margin: 0px; 
 
    background: #FFFFFF; 
 
    border: 2px solid #999999; border-radius: 30px; 
 
    position: absolute; top: 0; bottom: 0; right: 56px; 
 
    -moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s; 
 
    -o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s; 
 
    background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%); 
 
    background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%); 
 
    background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%); 
 
    background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%); 
 
    box-shadow: 0 1px 1px white inset; 
 
} 
 

 
.onoffswitch1-checkbox:checked + .onoffswitch1-label .onoffswitch1-inner { 
 
    margin-left: 0; 
 
} 
 

 
.onoffswitch1-checkbox:checked + .onoffswitch1-label .onoffswitch1-switch { 
 
    right: 0px; 
 
}

<div class="onoffswitch1"> 
 
        <input type="checkbox" name="onoffswitch1" class="onoffswitch1-checkbox" id="myonoffswitch1" checked> 
 
        <label class="onoffswitch1-label" for="myonoffswitch1"> 
 
        <span class="onoffswitch1-inner"></span> 
 
        <span class="onoffswitch1-switch"></span> 
 
        </label> 
 
       </div>

のように必要

出典

2017-08-03 core114

あなたはフィドルを作成することができますか？ – vel

@vel sir私が更新しました – core114

であるあなたはこれをチェック

のためのスイッチボタンを作成し、これは何が必要であるかどうかを確認してください。色とテキストの位置を微調整する必要があるかもしれません。

.onoffswitch1 { 
 
    width: 90px; 
 
} 
 

 
.onoffswitch1-checkbox { 
 
    display: none; 
 
} 
 

 
.onoffswitch1-label { 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    border: 2px solid #999999; 
 
    border-radius: 30px; 
 
    width: 90px; 
 
    height: 2em; 
 
    background: darkgray; 
 
    position: relative; 
 
    margin-top: 2em; 
 
} 
 

 
.onoffswitch1-checkbox:checked + .onoffswitch1-label { 
 
    background: lightblue; 
 
} 
 

 
.onoffswitch1-checkbox:checked+.onoffswitch1-label:before { 
 
    content: "OPEN"; 
 
    position: absolute; 
 
    top: -1.5em; 
 
    left: 0; 
 
} 
 

 
.onoffswitch1-checkbox+.onoffswitch1-label:before { 
 
    content: "CLOSED"; 
 
    position: absolute; 
 
    top: -1.5em; 
 
    left: 0; 
 
} 
 

 
.onoffswitch1-switch { 
 
    display: block; 
 
    width: 30px; 
 
    margin: 0px; 
 
    background: #FFFFFF; 
 
    border: 2px solid #999999; 
 
    border-radius: 30px; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 56px; 
 
    -moz-transition: all 0.3s ease-in 0s; 
 
    -webkit-transition: all 0.3s ease-in 0s; 
 
    -o-transition: all 0.3s ease-in 0s; 
 
    transition: all 0.3s ease-in 0s; 
 
    background-image: -moz-linear-gradient(center top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 80%); 
 
    background-image: -webkit-linear-gradient(center top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 80%); 
 
    background-image: -o-linear-gradient(center top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 80%); 
 
    background-image: linear-gradient(center top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 80%); 
 
    box-shadow: 0 1px 1px white inset; 
 
} 
 

 
.onoffswitch1-checkbox:checked+.onoffswitch1-label .onoffswitch1-inner { 
 
    margin-left: 0; 
 
} 
 

 
.onoffswitch1-checkbox:checked+.onoffswitch1-label .onoffswitch1-switch { 
 
    right: 0px; 
 
}

<div class="onoffswitch1"> 
 
    <input type="checkbox" name="onoffswitch1" class="onoffswitch1-checkbox" id="myonoffswitch1" checked> 
 
    <label class="onoffswitch1-label" for="myonoffswitch1"> 
 
    <span class="onoffswitch1-inner"></span> 
 
    <span class="onoffswitch1-switch"></span> 
 
    </label> 
 
</div>

出典

2017-08-03 07:32:15 Gerard

ソリューションありがとうございました。 – core114

あなたのプロジェクトには幸運です – Gerard

私は、これはHTML

<div class="switch"> 
    <input class="toggle" id="toggle-1" type="checkbox" > 
    <label class="c-label-switch" for="toggle-1"></label> 
    <label class="c-label" for="toggle-1">Remember password </label> 
</div>

であり、これはCSS

.switch { 
    display: block; 
} 

.switch span { 
    display: inline-block; 
    color: #141414; 
    margin-top: 0px; 
    font-size: 14px; 
    font-weight: bold; 
} 

.switch .c-label { 
    padding: 0px; 
    vertical-align: middle; 
} 

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

.toggle + label { 
    display: inline-block; 
    position: relative; 
    cursor: pointer; 
    border-radius: 15px; 
    width: 70px; 
    height: 30px; 
    overflow: hidden; 
    line-height: 4px; 
    margin-bottom: 0px; 
    vertical-align: middle; 
    margin-right: 10px; 
} 

.c-label-switch { 
    border: 1px solid #d1d1d1; 
} 

.toggle + label:before, .toggle + label:after { 
    display: block; 
    border-radius: 20px; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    bottom: 0px; 
    padding: 12px 12px 12px 9px; 
    color: #FFF; 
    font-family: 'Source Sans Pro'; 
} 

.toggle + label:before { 
    content: "No"; 
    right: 0px; 
    background-color: #ddd; 
    text-indent: -93px; 
    margin-left: 0px; 
    line-height: 5px; 
    font-size: 10px; 
} 

.toggle + label:after { 
    content: "Yes"; 
    text-indent: 35px; 
    width: 6px; 
    background-color: #fff; 
    margin: 1px; 
    text-shadow: 0 1px 0 #fff; 
    margin-left: 1px; 
    font-size: 10px; 
    color: #141414; 
} 

.toggle:checked + label:before { 
    background-color: #0065b3; 
    text-indent: 0; 
} 

.toggle:checked + label:after { 
    margin-left: 41px; 
    box-shadow: none; 
} 

.toggle + label:before, .toggle + label:after { 
    transition: All 0.5s ease; 
    -webkit-transition: All 0.5s ease; 
    -moz-transition: All 0.5s ease; 
    -o-transition: All 0.5s ease; 
}

出典

2017-08-03 07:07:39

さん、私の問題ではありません、 – core114

はいといいえは不可視にしますか？ –

このような前と後の要素には空の内容が必要です.onoffswitch1-inner：after {content： '' "} –

これを試してみてください。

<div class="switchcontainer"> 
    <label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"><span class="on">ON</span><span class="off">OFF</span></div></label> 
    </div> 




    .switchcontainer{ 
     margin-top:25px; 
    } 
    .switchcontainer .on{ 
     margin-top:-25px; 
     color:green; 
    } 
    .switchcontainer .off{ 
     margin-top:-25px; 
     color:red; 
    } 
    .switch { 
     position: relative; 
     display: inline-block; 
     width: 90px; 
     height: 34px; 
      border: 2px solid #999999; 
     border-radius: 30px; 
    } 

    .switch input {display:none;} 

    .slider { 
     position: absolute; 
     cursor: pointer; 
     top: 0; 
     left: 0; 
     right: 0; 
     bottom: 0; 
      background-color: #EEEEEE; 
     -webkit-transition: .4s; 
     transition: .4s; 
     box-shadow: 0px 15px 0px rgba(0,0,0,0.08) inset; 
    } 

    .slider:before { 
     content: ""; 
     height: 30px; 
     width: 26px; 
     left: 0px; 
     bottom: 4px; 
     background-color: white; 
     -webkit-transition: .4s; 
     transition: .4s; 
     display: block; 
     width: 30px; 
     margin: 0px; 
     background: #FFFFFF; 
     border: 2px solid #999999; 
     border-radius: 30px; 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     right: 56px; 
     -moz-transition: all 0.3s ease-in 0s; 
     -webkit-transition: all 0.3s ease-in 0s; 
     -o-transition: all 0.3s ease-in 0s; 
     transition: all 0.3s ease-in 0s; 
     background-image: -moz-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%); 
     background-image: -webkit-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%); 
     background-image: -o-linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%); 
     background-image: linear-gradient(center top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 80%); 
     box-shadow: 0 1px 1px white inset; 
    } 

    input:checked + .slider { 
      background-color: #2FCCFF; 
      box-shadow: 0px 15px 0px rgba(0,0,0,0.08) inset; 
    } 

    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%; 
    }

https://jsfiddle.net/gnanavelr/8LqLczyh/1/

出典

2017-08-03 07:35:29 vel

ありがとうございますソリューションサー – core114

トグルlable

答えて

関連する問題