チェックボックス(Checkbox)とCSSでコピペで使えるトグル スイッチ(toggle switch)を作る
角丸のトグル スイッチ(iOS風)
- HTML・CSSソースコードを見る
-
<label> <input type="checkbox" class="mam-toggle-switch1" /> </label> <style> input[type="checkbox"].mam-toggle-switch1{ box-sizing:border-box; position:relative; font-size:32px;/*基本サイズ お好きなサイズに設定*/ width:2em; height:1em; padding:0; appearance: none; -webkit-appearance: none; -ms-appearance: none; -moz-appearance: none; background:#AAA;/*オフの色*/ border-radius:0.5em; box-shadow: 0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset; -webkit-tap-highlight-color: transparent; } input[type="checkbox"].mam-toggle-switch1:checked{ background:#2C2;/*オンの色*/ } input[type="checkbox"].mam-toggle-switch1::before{ box-sizing:border-box; content:""; position:absolute; left:0.1em; top:0.1em; bottom:0.1em; width:0.8em; background:#FFF; border-radius:0.4em; transform:translate(0%,0%); transition:all 0.2s ease-in-out; box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6); margin:0; } input[type="checkbox"].mam-toggle-switch1:checked::before{ transform:translate(125%,0%); transition:all 0.2s ease-in-out; } </style>
四角のトグル スイッチ
- HTML・CSSソースコードを見る
-
<label> <input type="checkbox" class="mam-toggle-switch2" /> </label> <style> input[type="checkbox"].mam-toggle-switch2{ box-sizing:border-box; position:relative; font-size:32px;/*基本サイズ お好きなサイズに設定*/ width:2em; height:1em; padding:0; appearance: none; -webkit-appearance: none; -ms-appearance: none; -moz-appearance: none; background:#AAA;/*オフの色*/ border-radius:0em; box-shadow: 0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset; -webkit-tap-highlight-color: transparent; } input[type="checkbox"].mam-toggle-switch2:checked{ background:#2C2;/*オンの色*/ } input[type="checkbox"].mam-toggle-switch2::before{ box-sizing:border-box; content:""; position:absolute; left:0.1em; top:0.1em; bottom:0.1em; width:0.8em; background:#fff; border-radius:0em; transform:translate(0%,0%); transition:all 0.2s ease-in-out; box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6); margin:0; } input[type="checkbox"].mam-toggle-switch2:checked::before{ transform:translate(125%,0%); transition:all 0.2s ease-in-out; } </style>
アクチュエーターにON、OFFが表示される角丸のトグル スイッチ
- HTML・CSSソースコードを見る
-
<label> <input type="checkbox" class="mam-toggle-switch3" /> </label> <style> input[type="checkbox"].mam-toggle-switch3{ box-sizing:border-box; position:relative; font-size:32px;/*基本サイズ お好きなサイズに設定*/ width:2em; height:1em; padding:0; appearance: none; -webkit-appearance: none; -ms-appearance: none; -moz-appearance: none; background:#AAA;/*オフの色*/ border-radius:0.5em; box-shadow:0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset; -webkit-tap-highlight-color: transparent; } input[type="checkbox"].mam-toggle-switch3:checked{ background:#2C2;/*オンの色*/ } input[type="checkbox"].mam-toggle-switch3::before{ box-sizing:border-box; content:"OFF"; color:#333; font-size:0.4em; line-height:1em; padding:0.5em 0 0 0; overflow:visible; text-align:center; position:absolute; left:0.25em; top:0.25em; bottom:0.25em; width:2em; background:#FFF; border-radius:1em; transform:translateX(0%); transition:all 0.2s ease-in-out; box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6); margin:0; } input[type="checkbox"].mam-toggle-switch3:checked::before{ transform:translateX(125%); transition:all 0.2s ease-in-out; content:"ON"; color:#2C2; } </style>
アクチュエーターにON、OFFが表示される四角のトグル スイッチ
- HTML・CSSソースコードを見る
-
<label> <input type="checkbox" class="mam-toggle-switch4" /> </label> <style> input[type="checkbox"].mam-toggle-switch4{ box-sizing:border-box; position:relative; font-size:32px;/*基本サイズ お好きなサイズに設定*/ width:2em; height:1em; padding:0; appearance: none; -webkit-appearance: none; -ms-appearance: none; -moz-appearance: none; background:#AAA;/*オフの色*/ border-radius:0em; box-shadow: 0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset; -webkit-tap-highlight-color: transparent; } input[type="checkbox"].mam-toggle-switch4:checked{ background:#2C2;/*オンの色*/ } input[type="checkbox"].mam-toggle-switch4::before{ box-sizing:border-box; content:"OFF"; color:#333; font-size:0.4em; line-height:1em; padding:0.5em 0 0 0; overflow:visible; text-align:center; position:absolute; left:0.25em; top:0.25em; bottom:0.25em; width:2em; background:#FFF; border-radius:0em; transform:translate(0%,0%); transition:all 0.2s ease-in-out; box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6); margin:0; } input[type="checkbox"].mam-toggle-switch4:checked::before{ transform:translate(125%,0%); transition:all 0.2s ease-in-out; content:"ON"; color:#2C2; } </style>
内部にON、OFFが表示される角丸のトグル スイッチ
- HTML・CSSソースコードを見る
-
<label> <input type="checkbox" class="mam-toggle-switch5" /> </label> <style> input[type="checkbox"].mam-toggle-switch5{ box-sizing:border-box; position:relative; font-size:32px;/*基本サイズ お好きなサイズに設定*/ width:2em; height:1em; padding:0; appearance: none; -webkit-appearance: none; -ms-appearance: none; -moz-appearance: none; background:#333; background:#AAA;/*オフの色*/ border-radius:0.5em; box-shadow: 0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset; -webkit-tap-highlight-color: transparent; } input[type="checkbox"].mam-toggle-switch5:checked{ background:#2C2;/*オンの色*/ } input[type="checkbox"].mam-toggle-switch5::before{ box-sizing:border-box; content:""; position:absolute; left:0.1em; top:0.1em; bottom:0.1em; width:0.8em; background:#FFF; border-radius:0.4em; transform:translate(0%,0%); transition:all 0.2s ease-in-out; box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6); margin:0; } input[type="checkbox"].mam-toggle-switch5:checked::before{ transform:translate(125%,0%); transition:all 0.2s ease-in-out; } input[type="checkbox"].mam-toggle-switch5::after{ box-sizing:border-box; position:absolute; content:"OFF"; color:#fff; font-size:0.4em; left:0.5em; text-align:right; width:calc(100% - 1em); top:50%; transform:translate(0,-50%); } input[type="checkbox"].mam-toggle-switch5:checked::after{ content:"ON"; text-align:left; } </style>
内部にON、OFFが表示される四角のトグル スイッチ
- HTML・CSSソースコードを見る
-
<label> <input type="checkbox" class="mam-toggle-switch6" /> </label> <style> input[type="checkbox"].mam-toggle-switch6{ box-sizing:border-box; position:relative; font-size:32px;/*基本サイズ お好きなサイズに設定*/ width:2em; height:1em; padding:0; appearance: none; -webkit-appearance: none; -ms-appearance: none; -moz-appearance: none; background:#333; background:#AAA;/*オフの色*/ border-radius:0em; box-shadow:0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset; -webkit-tap-highlight-color: transparent; } input[type="checkbox"].mam-toggle-switch6:checked{ background:#2C2;/*オンの色*/ } input[type="checkbox"].mam-toggle-switch6::before{ box-sizing:border-box; content:""; position:absolute; left:0.1em; top:0.1em; bottom:0.1em; width:0.8em; background:#FFF; border-radius:0em; transform:translate(0%,0%); transition:all 0.2s ease-in-out; box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6); margin:0; } input[type="checkbox"].mam-toggle-switch6:checked::before{ transform:translate(125%,0%); transition:all 0.2s ease-in-out; } input[type="checkbox"].mam-toggle-switch6::after{ box-sizing:border-box; position:absolute; content:"OFF"; color:#fff; font-size:0.4em; left:0.5em; text-align:right; width:calc(100% - 1em); top:50%; transform:translate(0,-50%); } input[type="checkbox"].mam-toggle-switch6:checked::after{ content:"ON"; text-align:left; } </style>
細い溝のトグル スイッチ
- HTML・CSSソースコードを見る
-
<label> <input type="checkbox" class="mam-toggle-switch7" /> </label> <style> input[type="checkbox"].mam-toggle-switch7{ box-sizing:border-box; position:relative; font-size:32px;/*基本サイズ お好きなサイズに設定*/ width:2em; height:1em; padding:0; appearance: none; -webkit-appearance: none; -ms-appearance: none; -moz-appearance: none; border:none; -webkit-tap-highlight-color: transparent; } input[type="checkbox"].mam-toggle-switch7:checked{ background-color: transparent; } input[type="checkbox"].mam-toggle-switch7::before{ content:""; position:absolute; left:0.1em; right:0.1em; height:0.2em; background:#666;/*オフの色*/ border-radius:0.5em; box-shadow:0.1em 0.1em 0.1em 0 rgba(0,0,0,0.3); margin:0; transform:translate(0,calc(0.5em - 50%)); } input[type="checkbox"].mam-toggle-switch7:checked::before{ background:#2C2;/*オンの色*/ } input[type="checkbox"].mam-toggle-switch7::after{ box-sizing:border-box; content:""; position:absolute; left:0; top:0; bottom:0; width:1em; background:#CCC; border-radius:0.5em; transform:translate(0%,0%); transition:all 0.2s ease-in-out; box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6); margin:0; } input[type="checkbox"].mam-toggle-switch7:checked::after{ transform:translate(100%,0%); transition:all 0.2s ease-in-out; } </style>
電源マーク(O,I)が表示されるトグル スイッチ
- HTML・CSSソースコードを見る
-
<label> <input type="checkbox" class="mam-toggle-switch8" /> </label> <style> input[type="checkbox"].mam-toggle-switch8{ box-sizing:border-box; position:relative; font-size:32px;/*基本サイズ お好きなサイズに設定*/ width:2em; height:1em; padding:0; appearance: none; -webkit-appearance: none; -ms-appearance: none; -moz-appearance: none; background:#C22;/*オフの色*/ border-radius:0.5em; box-shadow: 0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset; -webkit-tap-highlight-color: transparent; } input[type="checkbox"].mam-toggle-switch8:checked{ background:#2C2;/*オンの色*/ } input[type="checkbox"].mam-toggle-switch8::before{ box-sizing:border-box; content:""; position:absolute; left:0.1em; top:0.1em; bottom:0.1em; width:0.8em; background:transparent; border:#FFF 0.2em solid; border-radius:0.4em; transform:translate(0%,0%); transition:all 0.2s ease-in-out; box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6); margin:0; } input[type="checkbox"].mam-toggle-switch8:checked::before{ width:0.2em; background:#FFF; transform:translate(1.2em,0%); transition:all 0.2s ease-in-out; } </style>
オン、オフ時にアクチュエーターがアニメーションする角丸トグル スイッチ
- HTML・CSSソースコードを見る
-
<label> <input type="checkbox" class="mam-toggle-switch9" /> </label> <style> input[type="checkbox"].mam-toggle-switch9{ box-sizing:border-box; position:relative; font-size:32px;/*基本サイズ お好きなサイズに設定*/ width:2em; height:1em; padding:0; appearance: none; -webkit-appearance: none; -ms-appearance: none; -moz-appearance: none; background:#AAA;/*オフの色*/ border-radius:0.5em; box-shadow: 0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset; -webkit-tap-highlight-color: transparent; } input[type="checkbox"].mam-toggle-switch9:checked{ background:#2C2;/*オンの色*/ } input[type="checkbox"].mam-toggle-switch9::before{ box-sizing:border-box; content:""; position:absolute; left:0.1em; top:0.1em; bottom:0.1em; width:0.8em; background:#FFF; border-radius:0.4em; transform:translate(0%,0%); transition:all 0.2s ease-in-out; box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6); margin:0; animation:mam-toggle-switch9b 0.2s linear 0.0s 1 normal both running; } input[type="checkbox"].mam-toggle-switch9:checked::before{ animation:mam-toggle-switch9a 0.2s linear 0.0s 1 normal both running; } @keyframes mam-toggle-switch9a{ 0%{transform:translate( 0%,0%) scaleX(1);} 50%{transform:translate( 64%,0%) scaleX(2);} 100%{transform:translate(128%,0%) scaleX(1);} } @keyframes mam-toggle-switch9b{ 0%{transform:translate(128%,0%) scaleX(1);} 50%{transform:translate( 64%,0%) scaleX(2);} 100%{transform:translate( 0%,0%) scaleX(1);} } </style>
オン、オフ時にアクチュエーターがアニメーションする四角のトグル スイッチ
- HTML・CSSソースコードを見る
-
<label> <input type="checkbox" class="mam-toggle-switch10" /> </label> <style> input[type="checkbox"].mam-toggle-switch10{ box-sizing:border-box; position:relative; font-size:32px;/*基本サイズ お好きなサイズに設定*/ width:2em; height:1em; padding:0; appearance: none; -webkit-appearance: none; -ms-appearance: none; -moz-appearance: none; background:#AAA;/*オフの色*/ border-radius:0em; box-shadow: 0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset; -webkit-tap-highlight-color: transparent; } input[type="checkbox"].mam-toggle-switch10:checked{ background:#2C2;/*オンの色*/ } input[type="checkbox"].mam-toggle-switch10::before{ box-sizing:border-box; content:""; position:absolute; left:0.1em; top:0.1em; bottom:0.1em; width:0.8em; background:#FFF; border-radius:0em; transform:translate(0%,0%); transition:all 0.2s ease-in-out; box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6); margin:0; animation:mam-toggle-switch10b 0.2s linear 0.0s 1 normal both running; } input[type="checkbox"].mam-toggle-switch10:checked::before{ animation:mam-toggle-switch10a 0.2s linear 0.0s 1 normal both running; } @keyframes mam-toggle-switch10a{ 0%{transform:translate( 0%,0%) scaleX(1);} 50%{transform:translate( 64%,0%) scaleX(2);} 100%{transform:translate(128%,0%) scaleX(1);} } @keyframes mam-toggle-switch10b{ 0%{transform:translate(128%,0%) scaleX(1);} 50%{transform:translate( 64%,0%) scaleX(2);} 100%{transform:translate( 0%,0%) scaleX(1);} } </style>
ロッカー スイッチ
- HTML・CSSソースコードを見る
-
<label> <input type="checkbox" class="mam-toggle-switch11" /> </label> <style> input[type="checkbox"].mam-toggle-switch11{ box-sizing:border-box; position:relative; font-size:32px;/*基本サイズ お好きなサイズに設定*/ width:2em; height:1em; margin:0.2em 2px 2px 2px; padding:0; appearance: none; -webkit-appearance: none; -ms-appearance: none; -moz-appearance: none; border-radius:0em; -webkit-tap-highlight-color: transparent; } input[type="checkbox"].mam-toggle-switch11::before{ content:"On"; box-sizing:border-box; position:absolute; font-size:0.4em; margin:0; width:50%; height:100%; left:0; top:0; bottom:0; text-align:center; padding:0.6em 0em; transform-origin:100% 100%; color:#fff; transform:skew(0deg,10deg) scaleX(90%); background:#444; box-shadow:-0.2em 0.2em 0.1em 0.1em rgba(0,0,0,0.4); transition:all 0.2s; } input[type="checkbox"].mam-toggle-switch11:checked::before{ transform:skew(0deg,0deg); background:#2C2; box-shadow:0em 0.2em 0.1em 0.1em rgba(0,0,0,0.4); } input[type="checkbox"].mam-toggle-switch11::after{ content:"Off"; box-sizing:border-box; position:absolute; font-size:0.4em; margin:0; width:50%; height:100%; right:0; top:0; bottom:0; text-align:center; padding:0.6em 0em; transform-origin:0% 100%; color:#fff; transform:skew(0deg,0deg); background:#f22; box-shadow:0em 0.2em 0.1em 0.1em rgba(0,0,0,0.4); transition:all 0.2s; } input[type="checkbox"].mam-toggle-switch11:checked::after{ transform:skew(0deg,-10deg) scaleX(90%); background:#444; box-shadow:0.2em 0.2em 0.1em 0.1em rgba(0,0,0,0.4); } </style>
パイロット スイッチ
- HTML・CSSソースコードを見る
-
<label> <input type="checkbox" class="mam-toggle-switch12" /> </label> <style> input[type="checkbox"].mam-toggle-switch12{ box-sizing:border-box; position:relative; font-size:32px;/*基本サイズ お好きなサイズに設定*/ width:2em; height:1em; padding:0; margin:0.2em 0.5em 0.2em 0.1em; appearance: none; -webkit-appearance: none; -ms-appearance: none; -moz-appearance: none; background:#AAA;/*オフの色*/ border-radius:0.5em; box-shadow: 0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset; -webkit-tap-highlight-color: transparent; } input[type="checkbox"].mam-toggle-switch12::before{ box-sizing:border-box; content:""; position:absolute; left:0.1em; top:0.1em; bottom:0.1em; width:0.8em; background:#fff; border-radius:0.4em; transform:translate(0%,0%); transition:all 0.2s ease-in-out; box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6); margin:0; } input[type="checkbox"].mam-toggle-switch12:checked::before{ transform:translate(125%,0%); transition:all 0.2s ease-in-out; box-shadow:0.1em 0em 0.1em 0px rgba(34,204,34,0.3); } input[type="checkbox"].mam-toggle-switch12::after{ box-sizing:border-box; content:""; position:absolute; width:0.3em; height:0.3em; top:0.4em; left:2.1em; border-radius:50%; background:#999; box-shadow:0 0 0 0 rgba(153,153,153,0.4), inset -0.05em -0.05em 0.05em 0 rgba(0,0,0,0.4); } input[type="checkbox"].mam-toggle-switch12:checked::after{ background:#2c2; box-shadow:0 0 0.05em 0.05em rgba(34,204,34,0.4), inset -0.05em -0.05em 0.05em 0 rgba(0,0,0,0.4); } </style>
角型パイロット スイッチ
- HTML・CSSソースコードを見る
-
<label> <input type="checkbox" class="mam-toggle-switch13" /> </label> <style> input[type="checkbox"].mam-toggle-switch13{ box-sizing:border-box; position:relative; font-size:32px;/*基本サイズ お好きなサイズに設定*/ width:2em; height:1em; padding:0; margin:0.2em 0.5em 0.2em 0.1em; appearance: none; -webkit-appearance: none; -ms-appearance: none; -moz-appearance: none; background:#AAA;/*オフの色*/ border-radius:0.1em; box-shadow: 0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset; -webkit-tap-highlight-color: transparent; } input[type="checkbox"].mam-toggle-switch13::before{ box-sizing:border-box; content:""; position:absolute; left:0.1em; top:0.1em; bottom:0.1em; width:0.8em; background:#fff; border-radius:0.1em; transform:translate(0%,0%); transition:all 0.2s ease-in-out; box-shadow:0.1em 0.1em 0.1em 0px rgba(0,0,0,0.6); margin:0; } input[type="checkbox"].mam-toggle-switch13:checked::before{ transform:translate(125%,0%); transition:all 0.2s ease-in-out; box-shadow:0.1em 0em 0.1em 0px rgba(34,204,34,0.3); } input[type="checkbox"].mam-toggle-switch13::after{ box-sizing:border-box; content:""; position:absolute; width:0.3em; height:0.3em; top:0.4em; left:2.1em; border-radius:50%; background:#999; box-shadow:0 0 0 0 rgba(153,153,153,0.4), inset -0.05em -0.05em 0.05em 0 rgba(0,0,0,0.4); } input[type="checkbox"].mam-toggle-switch13:checked::after{ background:#2c2; box-shadow:0 0 0.05em 0.05em rgba(34,204,34,0.4), inset -0.05em -0.05em 0.05em 0 rgba(0,0,0,0.4); } </style>