トップへ(mam-mam.net/)

コピペで使えるトグル スイッチ(toggle switch)のCSSデザイン13種類

チェックボックス(Checkbox)とCSSでコピペで使えるトグル スイッチ(toggle switch)

コピペで使用できるタップやクリックでON/OFFできるHTML(input type="checkbox")+CSSを使ったトグルスイッチのサンプル デザイン集13種類。

角丸のトグル スイッチ（iOS風）

HTML・CSSソースコード 
<label class="mam-toggle-switch1">
  <input type="checkbox" />トグルスイッチのON/OFF
</label>

<style>
label.mam-toggle-switch1:has(input[type="checkbox"]){
  display:inline-flex;
  --font-size:24px;/*基本サイズ お好きなサイズに設定*/
  font-size:var(--font-size);
  line-height:calc(var(--font-size) + 4px);
  align-items:center;
}
label.mam-toggle-switch1>input[type="checkbox"]{
  box-sizing:border-box;
  position:relative;
  font-size:1.4em;
  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;
}
label.mam-toggle-switch1>input[type="checkbox"]:checked{
  background:#2C2;/*オンの色*/
}
label.mam-toggle-switch1>input[type="checkbox"]::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;
}
label.mam-toggle-switch1>input[type="checkbox"]:checked::before{
  transform:translate(125%,0%);
  transition:all 0.2s ease-in-out;
}
</style>

四角のトグル スイッチ

HTML・CSSソースコード 
<label class="mam-toggle-switch2">
  <input type="checkbox" />トグルスイッチのON/OFF
</label>

<style>
label.mam-toggle-switch2:has(input[type="checkbox"]){
  display:inline-flex;
  --font-size:24px;/*基本サイズ お好きなサイズに設定*/
  font-size:var(--font-size);
  line-height:calc(var(--font-size) + 4px);
  align-items:center;
}
label.mam-toggle-switch2>input[type="checkbox"]{
  box-sizing:border-box;
  position:relative;
  font-size:1.4em;
  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;
}
label.mam-toggle-switch2>input[type="checkbox"]:checked{
  background:#2C2;/*オンの色*/
}
label.mam-toggle-switch2>input[type="checkbox"]::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;
}
label.mam-toggle-switch2>input[type="checkbox"]:checked::before{
  transform:translate(125%,0%);
  transition:all 0.2s ease-in-out;
}
</style>

アクチュエーターにON、OFFが表示される角丸のトグル スイッチ

HTML・CSSソースコードを見る 
<label class="mam-toggle-switch3">
  <input type="checkbox" />
</label>

<style>
label.mam-toggle-switch3:has(input[type="checkbox"]){
  display:inline-flex;
  --font-size:24px;/*基本サイズ お好きなサイズに設定*/
  font-size:var(--font-size);
  line-height:calc(var(--font-size) + 4px);
  align-items:center;
}
label.mam-toggle-switch3>input[type="checkbox"]{
  box-sizing:border-box;
  position:relative;
  font-size:1.4em;
  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;
}
label.mam-toggle-switch3>input[type="checkbox"]:checked{
  background:#2C2;/*オンの色*/
}
label.mam-toggle-switch3>input[type="checkbox"]::before{
  box-sizing:border-box;
  content:"OFF";
  color:#333;
  font-size:0.4em;
  line-height:1em;
  padding:0.55em 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;
}
label.mam-toggle-switch3>input[type="checkbox"]:checked::before{
  transform:translateX(125%);
  transition:all 0.2s ease-in-out;
  content:"ON";
  color:#2C2;
}
</style>

アクチュエーターにON、OFFが表示される四角のトグル スイッチ

HTML・CSSソースコードを見る 
<label class="mam-toggle-switch4">
  <input type="checkbox" />
</label>

<style>
label.mam-toggle-switch4:has(input[type="checkbox"]){
  display:inline-flex;
  --font-size:24px;/*基本サイズ お好きなサイズに設定*/
  font-size:var(--font-size);
  line-height:calc(var(--font-size) + 4px);
  align-items:center;
}
label.mam-toggle-switch4>input[type="checkbox"]{
  box-sizing:border-box;
  position:relative;
  font-size:1.4em;
  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;
}
label.mam-toggle-switch4>input[type="checkbox"]:checked{
  background:#2C2;/*オンの色*/
}
label.mam-toggle-switch4>input[type="checkbox"]::before{
  box-sizing:border-box;
  content:"OFF";
  color:#333;
  font-size:0.4em;
  line-height:1em;
  padding:0.55em 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;
}
label.mam-toggle-switch4>input[type="checkbox"]:checked::before{
  transform:translate(125%,0%);
  transition:all 0.2s ease-in-out;
  content:"ON";
  color:#2C2;
}
</style>

内部にON、OFFが表示される角丸のトグル スイッチ

HTML・CSSソースコードを見る 
<label class="mam-toggle-switch5">
  <input type="checkbox" />トグルスイッチのON/OFF
</label>

<style>
label.mam-toggle-switch5:has(input[type="checkbox"]){
  display:inline-flex;
  --font-size:24px;/*基本サイズ お好きなサイズに設定*/
  font-size:var(--font-size);
  line-height:calc(var(--font-size) + 4px);
  align-items:center;
}
label.mam-toggle-switch5>input[type="checkbox"]{
  box-sizing:border-box;
  position:relative;
  font-size:1.4em;
  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;
}
label.mam-toggle-switch5>input[type="checkbox"]:checked{
  background:#2C2;/*オンの色*/
}
label.mam-toggle-switch5>input[type="checkbox"]::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;
}
label.mam-toggle-switch5>input[type="checkbox"]:checked::before{
  transform:translate(125%,0%);
  transition:all 0.2s ease-in-out;
}
label.mam-toggle-switch5>input[type="checkbox"]::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%);
}
label.mam-toggle-switch5>input[type="checkbox"]:checked::after{
  content:"ON";
  text-align:left;
}
</style>

内部にON、OFFが表示される四角のトグル スイッチ

HTML・CSSソースコードを見る 
<label class="mam-toggle-switch6">
  <input type="checkbox" />トグルスイッチのON/OFF
</label>

<style>
label.mam-toggle-switch6:has(input[type="checkbox"]){
  display:inline-flex;
  --font-size:24px;/*基本サイズ お好きなサイズに設定*/
  font-size:var(--font-size);
  line-height:calc(var(--font-size) + 4px);
  align-items:center;
}
label.mam-toggle-switch6>input[type="checkbox"]{
  box-sizing:border-box;
  position:relative;
  font-size:1.4em;
  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;
}
label.mam-toggle-switch6>input[type="checkbox"]:checked{
  background:#2C2;/*オンの色*/
}
label.mam-toggle-switch6>input[type="checkbox"]::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;
}
label.mam-toggle-switch6>input[type="checkbox"]:checked::before{
  transform:translate(125%,0%);
  transition:all 0.2s ease-in-out;
}
label.mam-toggle-switch6>input[type="checkbox"]::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%);
}
label.mam-toggle-switch6>input[type="checkbox"]:checked::after{
  content:"ON";
  text-align:left;
}

細い溝のトグル スイッチ

HTML・CSSソースコードを見る 
<label class="mam-toggle-switch7">
  <input type="checkbox" />トグルスイッチのON/OFF
</label>

<style>
label.mam-toggle-switch7:has(input[type="checkbox"]){
  display:inline-flex;
  --font-size:24px;/*基本サイズ お好きなサイズに設定*/
  font-size:var(--font-size);
  line-height:calc(var(--font-size) + 4px);
  align-items:center;
}
label.mam-toggle-switch7>input[type="checkbox"]{
  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;
}
label.mam-toggle-switch7>input[type="checkbox"]:checked{
  background-color: transparent;
}
label.mam-toggle-switch7>input[type="checkbox"]::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%));
}
label.mam-toggle-switch7>input[type="checkbox"]:checked::before{
  background:#2C2;/*オンの色*/
}
label.mam-toggle-switch7>input[type="checkbox"]::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;
}
label.mam-toggle-switch7>input[type="checkbox"]:checked::after{
  transform:translate(100%,0%);
  transition:all 0.2s ease-in-out;
}
</style>

電源マーク（O,I）が表示されるトグル スイッチ

HTML・CSSソースコードを見る 
<label class="mam-toggle-switch8">
  <input type="checkbox" />トグルスイッチのON/OFF
</label>

<style>
label.mam-toggle-switch8:has(input[type="checkbox"]){
  display:inline-flex;
  --font-size:24px;/*基本サイズ お好きなサイズに設定*/
  font-size:var(--font-size);
  line-height:calc(var(--font-size) + 4px);
  align-items:center;
}
label.mam-toggle-switch8>input[type="checkbox"]{
  box-sizing:border-box;
  position:relative;
  font-size:1.4em;
  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;
}
label.mam-toggle-switch8>input[type="checkbox"]:checked{
  background:#2C2;/*オンの色*/
}
label.mam-toggle-switch8>input[type="checkbox"]::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;
}
label.mam-toggle-switch8>input[type="checkbox"]:checked::before{
  width:0.2em;
  background:#FFF;
  transform:translate(1.2em,0%);
  transition:all 0.2s ease-in-out;
}
</style>

オン、オフ時にアクチュエーターがアニメーションする角丸トグル スイッチ

HTML・CSSソースコードを見る 
<label class="mam-toggle-switch9">
  <input type="checkbox" />トグルスイッチのON/OFF
</label>

<style>
label.mam-toggle-switch9:has(input[type="checkbox"]){
  display:inline-flex;
  --font-size:24px;/*基本サイズ お好きなサイズに設定*/
  font-size:var(--font-size);
  line-height:calc(var(--font-size) + 4px);
  align-items:center;
}
label.mam-toggle-switch9>input[type="checkbox"]{
  box-sizing:border-box;
  position:relative;
  font-size:1.4em;
  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;
}
label.mam-toggle-switch9>input[type="checkbox"]:checked{
  background:#2C2;/*オンの色*/
}
label.mam-toggle-switch9>input[type="checkbox"]::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;
}
label.mam-toggle-switch9>input[type="checkbox"]: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 class="mam-toggle-switch10">
  <input type="checkbox" />トグルスイッチのON/OFF
</label>

<style>
label.mam-toggle-switch10:has(input[type="checkbox"]){
  display:inline-flex;
  --font-size:24px;/*基本サイズ お好きなサイズに設定*/
  font-size:var(--font-size);
  line-height:calc(var(--font-size) + 4px);
  align-items:center;
}
label.mam-toggle-switch10>input[type="checkbox"]{
  box-sizing:border-box;
  position:relative;
  font-size:1.4em;
  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;
}
label.mam-toggle-switch10>input[type="checkbox"]:checked{
  background:#2C2;/*オンの色*/
}
label.mam-toggle-switch10>input[type="checkbox"]::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;
}
label.mam-toggle-switch10>input[type="checkbox"]: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 class="mam-toggle-switch11">
  <input type="checkbox" />トグルスイッチのON/OFF
</label>

<style>
label.mam-toggle-switch11:has(input[type="checkbox"]){
  display:inline-flex;
  --font-size:24px;/*基本サイズ お好きなサイズに設定*/
  font-size:var(--font-size);
  line-height:calc(var(--font-size) + 4px);
  align-items:center;
}
label.mam-toggle-switch11>input[type="checkbox"]{
  box-sizing:border-box;
  position:relative;
  font-size:1.4em;
  width:2em;
  height:1em;
  margin:0.2em 2px 2px 2px;
  padding:0;
  appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  -moz-appearance: none;
  /*border:1px solid #444;*/
  border-radius:0em;
  /*box-shadow:0.3em 0.3em 0.3em 0px rgba(0,0,0,0.6) inset;*/
  -webkit-tap-highlight-color: transparent;
}
label.mam-toggle-switch11>input[type="checkbox"]::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;
}
label.mam-toggle-switch11>input[type="checkbox"]:checked::before{
  transform:skew(0deg,0deg);
  background:#2C2;
  box-shadow:0em 0.2em 0.1em 0.1em rgba(0,0,0,0.4);
}
label.mam-toggle-switch11>input[type="checkbox"]::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;
}
label.mam-toggle-switch11>input[type="checkbox"]: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 class="mam-toggle-switch12">
  <input type="checkbox" />トグルスイッチのON/OFF
</label>

<style>
label.mam-toggle-switch12:has(input[type="checkbox"]){
  display:inline-flex;
  --font-size:24px;/*基本サイズ お好きなサイズに設定*/
  font-size:var(--font-size);
  line-height:calc(var(--font-size) + 4px);
  align-items:center;
}
label.mam-toggle-switch12>input[type="checkbox"]{
  box-sizing:border-box;
  position:relative;
  font-size:1.4em;
  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;
}
label.mam-toggle-switch12>input[type="checkbox"]:checked{
  /*background:#2C2;*/ /*オンの色を変える場合*/
}
label.mam-toggle-switch12>input[type="checkbox"]::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;
}
label.mam-toggle-switch12>input[type="checkbox"]: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);
}
label.mam-toggle-switch12>input[type="checkbox"]::after{
  box-sizing:border-box;
  content:"";
  position:absolute;
  width:0.3em;
  height:0.3em;
  top:0.35em;
  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);
}
label.mam-toggle-switch12>input[type="checkbox"]: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 class="mam-toggle-switch13">
  <input type="checkbox" />トグルスイッチのON/OFF
</label>

<style>
label.mam-toggle-switch13:has(input[type="checkbox"]){
  display:inline-flex;
  --font-size:24px;/*基本サイズ お好きなサイズに設定*/
  font-size:var(--font-size);
  line-height:calc(var(--font-size) + 4px);
  align-items:center;
}
label.mam-toggle-switch13>input[type="checkbox"]{
  box-sizing:border-box;
  position:relative;
  font-size:1.4em;
  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;
}
label.mam-toggle-switch13>input[type="checkbox"]:checked{
  /*background:#2C2;*/ /*オンの色を変える場合*/
}
label.mam-toggle-switch13>input[type="checkbox"]::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;
}
label.mam-toggle-switch13>input[type="checkbox"]: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);
}
label.mam-toggle-switch13>input[type="checkbox"]::after{
  box-sizing:border-box;
  content:"";
  position:absolute;
  width:0.3em;
  height:0.3em;
  top:0.35em;
  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);
}
label.mam-toggle-switch13>input[type="checkbox"]: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>