チェックボックスをCSSイベントのトリガーとして、表示コントロールをする場合 以下のように兄弟要素になっている必要があります
<input type="checkbox"...> <div id="target-box"> ... </div>
一般的なチェックボックスのスタイルは、以下のような構造でスタイルを当てることが多く
<div> <input type="checkbox"...> </div>
トリガーとして使う場合は、使い勝手が悪くなります
以下のスタイルは、inputとlabel要素でスタイルが完結するように工夫したスタイルです。このようにスタイルを設定する事で、
柔軟かつ簡単にトリガー用のスイッチを配置することが出来ます。
WordPress投稿内で使用する場合
ワードプレスは、wpautop()が、投稿内の要素を自動的にp要素で囲みます。このことが災いして、うまく動作しない事があります。
the_content フィルターなどで、input要素をp要素で囲まなくする処理を行ってください。
このサイトで使用しているRaindropsテーマは、ver1.417で、input要素をp要素で囲まなくする処理が追加されています。
HTML
<input type="checkbox" id="c4" name="c4" data-skin="power" /><label for="c4"><span title="Switch"></span></label><span>ラベル外にスパンテキスト追加OK</span> <input type="checkbox" id="c3" name="c3" data-skin="inset" /><label for="c3"><span></span>テキスト追加OK</label> <input type="checkbox" id="c2" name="c2" data-skin="outset" /><label for="c2"><span></span>テキスト追加OK</label> <input type="checkbox" id="c1" name="c1" data-skin="flat" data-mod="button" /><label for="c1"><span></span>テキスト追加OK</label> <input type="checkbox" id="c5" name="c5" data-skin="square" /><label for="c5"><span title="test"></span>テキスト追加OK</label> <input type="checkbox" id="c6" name="c6" data-skin="square" /><label for="c6"><span data-title-active="grid" data-title="list"></span>ボタン文字の変更</label> <input type="checkbox" id="c7" name="c7" data-skin="hamburger" data-mod="button" /><label for="c7"><span></span></label>
CSS
詳細度の調整が必要な場合があります
input[type="checkbox"][data-skin] + label{
margin:1.5em 1em 0;
display:block;
vertical-align:middle;
clear:both;
}
input[type="checkbox"][data-skin] {
display:none;
}
input[type="checkbox"][data-skin="flat"] + label span {
margin:0 .5em 0 0;
display:inline-block;
width:.8em;
height:.8em;
vertical-align: middle;
background: #fcfff4;
cursor:pointer;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border:.2em solid #000;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow:none;
}
input[type="checkbox"][data-skin="flat"]:checked + label span {
background:lightgreen;
}
input[type="checkbox"][data-skin="outset"] + label span {
vertical-align: middle;
margin:0 .5em 0 0;
border:.2em solid #000;
display:inline-block;
width: .8em;
height: .8em;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-ms-transition: all .4s ease;
transition: all .4s ease;
cursor: pointer;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}
input[type="checkbox"][data-skin="outset"]:checked + label span {
background:lightgreen;
}
input[type="checkbox"][data-skin="inset"] + label span{
vertical-align: middle;
margin:0 .5em 0 0;
position:relative;
cursor: pointer;
width: 1em;
height: 1em;
top: 0;
border-radius: 4px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4);
background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
background: -o-linear-gradient(top, #222 0%, #45484d 100%);
background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
background: linear-gradient(top, #222 0%, #45484d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
display:inline-block;
}
input[type="checkbox"][data-skin="inset"] + label{
display:inline-block;
}
input[type="checkbox"][data-skin="inset"] + label span:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 1px;
left: 2px;
border: 3px solid #fcfff4;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
input[type="checkbox"][data-skin="inset"]:checked + label span:hover:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
input[type="checkbox"][data-skin="inset"]:checked + label span:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
input[type="checkbox"][data-skin="power"] + label{
width: 80px;
height: 26px;
background: #333;
margin: 20px auto;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
position: relative;
-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
position:relative;
display:inline-block;
}
input[type="checkbox"][data-skin="power"]+ label:after{
content: 'OFF';
font: 12px/26px Arial, sans-serif;
color: #000;
position: absolute;
right: 10px;
top:0;
z-index: 0;
font-weight: bold;
text-shadow: 1px 1px 0px rgba(255,255,255,.15);
}
input[type="checkbox"][data-skin="power"]+ label:before{
content: 'ON';
font: 12px/26px Arial, sans-serif;
color: #00bf00;
position: absolute;
left: 10px;
z-index: 0;
font-weight: bold;
}
input[type="checkbox"][data-skin="power"]+ label span{
display: block;
width: 34px;
height: 20px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
-ms-transition: all .4s ease;
transition: all .4s ease;
cursor: pointer;
position:absolute;
top: 3px;
left: 4px;
z-index: 1;
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}
input[type="checkbox"][data-skin="power"]:checked + label span{
left: 43px;
}
#c1-target, #c2-target, #c3-target, #c4-target{
display:none;
}
inpute:after{
content: attr(data-title);
}