2016-09-14 13 views
2

私のウェブページには複数のトグルボタンがあります。私はcheckbox入力コントロールをいくつかのCSSで使用して、トグルボタンのトグルデザインを取得しています。いずれかのトグルボタンの状態を変更すると、CSSの効果が最初のトグルに反映されます。アクティブトグルだけにどのように効果を適用できますか?擬似CSSトランジションを使用してアクティブなトグルボタンのCSSを変更するには

<div> 
    <div class="material-toggle"> 
    <input type="checkbox" id="toggle" name="toggle" checked=true class="switch" /> 
    <label for="toggle" class=""></label> 
    </div> 
    <div class="material-toggle"> 
    <input type="checkbox" id="toggle" name="toggle" checked=true class="switch" /> 
    <label for="toggle" class=""></label> 
    </div> 
</div> 

私が使用しているCSSは次のとおりです。

.material-toggle { 
    height: 22px; 
    width: 40px; 
    margin: 12px; 
} 

.material-toggle input:empty { 
    margin-left: -9999px; 
} 

.material-toggle input:empty ~ label { 
    position: relative; 
    float: left; 
    width: 150px; 
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

.material-toggle input:empty ~ label:before, 
.material-toggle input:empty ~ label:after { 
    position: absolute; 
    display: block; 
    content: ' '; 
    -webkit-transition: all 250ms cubic-bezier(.4,0,.2,1); 
    transition: all 250ms cubic-bezier(.4,0,.2,1); 
} 

.material-toggle input:empty ~ label:before { 
    top: 3px; 
    left: 0px; 
    width: 32px; 
    height: 13px; 
    border-radius: 12px; 
    background-color: #bdbdbd; 
} 

input.switch:empty ~ label:after { 
    top: -1px; 
    left: -9px; 
    width: 1.4em; 
    height: 8px; 
    bottom: 0.1em; 
    margin-left: 0.1em; 
    background-color: #fff; 
    border-radius: 50%; 
    width: 17px; 
    height: 17px; 
    border-radius: 50%; 
    border: solid 2px; 
    border-color: #fff; 
    box-shadow: 0 3px 4px 0 rgba(0,0,0,.14),0 3px 3px -2px rgba(0,0,0,.2),0 1px 8px 0 rgba(0,0,0,.12); 
} 

.material-toggle input:checked ~ label:before { 
    background-color: #1e88e5; 
} 

.material-toggle input:checked ~ label:after { 
    left: 15px; 
    background-color: #1565c0; 
    border-color: #1565c0; 
} 

これにはcodepenを添付しています。

答えて

5

を持って、固有のIDを必要としますIDは一意であるため、IDとlabel forを変更して、それらのIDをターゲットにしてください。

.material-toggle { 
 
    height: 22px; 
 
    width: 40px; 
 
    margin: 12px; 
 
} 
 
.material-toggle input:empty { 
 
    margin-left: -9999px; 
 
} 
 
.material-toggle input:empty ~ label { 
 
    position: relative; 
 
    float: left; 
 
    width: 150px; 
 
    cursor: pointer; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 
.material-toggle input:empty ~ label:before, 
 
.material-toggle input:empty ~ label:after { 
 
    position: absolute; 
 
    display: block; 
 
    content: ' '; 
 
    -webkit-transition: all 250ms cubic-bezier(.4, 0, .2, 1); 
 
    transition: all 250ms cubic-bezier(.4, 0, .2, 1); 
 
} 
 
.material-toggle input:empty ~ label:before { 
 
    top: 3px; 
 
    left: 0px; 
 
    width: 32px; 
 
    height: 13px; 
 
    border-radius: 12px; 
 
    background-color: #bdbdbd; 
 
} 
 
input.switch:empty ~ label:after { 
 
    top: -1px; 
 
    left: -9px; 
 
    width: 1.4em; 
 
    height: 8px; 
 
    bottom: 0.1em; 
 
    margin-left: 0.1em; 
 
    background-color: #fff; 
 
    border-radius: 50%; 
 
    width: 17px; 
 
    height: 17px; 
 
    border-radius: 50%; 
 
    border: solid 2px; 
 
    border-color: #fff; 
 
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12); 
 
} 
 
.material-toggle input:checked ~ label:before { 
 
    background-color: #1e88e5; 
 
} 
 
.material-toggle input:checked ~ label:after { 
 
    left: 15px; 
 
    background-color: #1565c0; 
 
    border-color: #1565c0; 
 
}
<div> 
 
    <div class="material-toggle"> 
 
    <input type="checkbox" id="toggle" name="toggle" checked=true class="switch" /> 
 
    <label for="toggle" class=""></label> 
 
    </div> 
 
    <div class="material-toggle"> 
 
    <input type="checkbox" id="toggle2" name="toggle" checked=true class="switch" /> 
 
    <label for="toggle2" class=""></label> 
 
    </div> 
 
</div>

0

あなたは現在、彼らの両方を使用すると、複数のトグルボタンを持つようにしたい場合は、これができない、あなたがIDを使用する必要がありますが、両方のトグルで同じIDを持ってid="toggle"

<div> 
    <div class="material-toggle"> 
    <input type="checkbox" id="toggle" name="toggle" checked=true class="switch" /> 
    <label for="toggle" class=""></label> 
    </div> 
    <div class="material-toggle"> 
    <input type="checkbox" id="toggle2" name="toggle" checked=true class="switch" /> 
    <label for="toggle2" class=""></label> 
    </div> 
</div> 
+0

問題自体を – dippas

+0

修正されませんうーんはい、それ意志 –

+0

それはしないという。http://codepen.io/anon/pen/ZpWEmd – dippas

0
<div> 
    <div class="material-toggle"> 
    <input type="checkbox" id="toggle" name="toggle" class="switch" /> 
    <label for="toggle" class=""></label> 
    </div> 
    <div class="material-toggle"> 
    <input type="checkbox" id="toggle-2" name="toggle" class="switch" /> 
    <label for="toggle-2" class=""></label> 
    </div> 
</div> 

私は値に対して異なるラベルを割り当てることを決議しました。私はマテリアルテーマのスイッチャーをやったが、私はJavascriptとJqueryを使って、ページ内の複数のスイッチャーで動作させた。

+0

Vivekはメソッドを使用してCSSのトランジション...だから彼はjsとjqコードを必要としない... –

0

「id」を別に使用しないでください。私は質問を理解していれば は、答えはありません:

<div> 
    <div class="material-toggle"> 
     <input type="checkbox" id="toggle1" name="toggle" checked=true class="switch" /> 
     <label for="toggle1" class=""></label> 
    </div> 
    <div class="material-toggle"> 
     <input type="checkbox" id="toggle2" name="toggle" checked=false class="switch" /> 
     <label for="toggle2" class=""></label> 
    </div> 
</div> 
関連する問題