cssだけでラジオボタンを2択スイッチに変更

cssだけでcheckboxやradioのデザインを変更の応用で、
Javascriptを使わず2択スイッチのデザインを付ける方法です。
IE8ではデフォルトのラジオボタンが表示され、IE9以上ではスタイルが適用されます。

スタイル適用前

スタイル適用後

ソース

隣接セレクタ(+)を使うので、ラジオボタンはlabelの直前に置きます。

<br />
&lt;div class=&quot;sample&quot;&gt;<br />
	&lt;div class=&quot;either&quot;&gt;<br />
		&lt;input type=&quot;radio&quot; name=&quot;dummy&quot; id=&quot;dummy_1&quot; value=&quot;1&quot; checked=&quot;checked&quot; /&gt;<br />
		&lt;label for=&quot;dummy_1&quot; data-label=&quot;ON&quot;&gt;ON&lt;/label&gt;<br />
		&lt;input type=&quot;radio&quot; name=&quot;dummy&quot; id=&quot;dummy_0&quot; value=&quot;0&quot; /&gt;<br />
		&lt;label for=&quot;dummy_0&quot; data-label=&quot;OFF&quot;&gt;OFF&lt;/label&gt;<br />
	&lt;/div&gt;<br />
	&lt;div&gt;<br />
		&lt;input type=&quot;radio&quot; name=&quot;sample-radio&quot; checked=&quot;checked&quot; id=&quot;radio-1&quot; /&gt;&lt;label for=&quot;radio-1&quot;&gt;radio 1&lt;/label&gt;<br />
		&lt;input type=&quot;radio&quot; name=&quot;sample-radio&quot; id=&quot;radio-2&quot; /&gt;&lt;label for=&quot;radio-2&quot;&gt;radio 2&lt;/label&gt;<br />
	&lt;/div&gt;<br />
	&lt;div&gt;<br />
		&lt;input type=&quot;checkbox&quot; name=&quot;sample-checkbox&quot; checked=&quot;checked&quot; id=&quot;checkbox&quot; /&gt;&lt;label for=&quot;checkbox&quot;&gt;checkbox&lt;/label&gt;<br />
	&lt;/div&gt;<br />
&lt;/div&gt;<br />

cssだけでcheckboxやradioのデザインを変更のラジオボタンと併用できるよう
先にチェックボックスとラジオボタンの設定をし
後から.eitherで囲った2択スイッチの設定をしています。

<br />
.sample input[type=radio],<br />
.sample input[type=checkbox] {<br />
    display: inline-block;<br />
    margin-right: 6px;<br />
}<br />
.sample input[type=radio] + label,<br />
.sample input[type=checkbox] + label {<br />
    position: relative;</p>
<p>    display: inline-block;<br />
    margin-right: 12px;</p>
<p>    font-size: 14px;<br />
    line-height: 30px;</p>
<p>    cursor: pointer;<br />
}</p>
<p>@media (min-width: 1px) {<br />
    .sample input[type=radio],<br />
    .sample input[type=checkbox] {<br />
        display: none;<br />
        margin: 0;<br />
    }<br />
    .sample input[type=radio] + label,<br />
    .sample input[type=checkbox] + label {<br />
        padding: 0 0 0 24px;<br />
    }<br />
    .sample input[type=radio] + label::before,<br />
    .sample input[type=checkbox] + label::before {<br />
        content: &quot;&quot;;<br />
        position: absolute;<br />
        top: 50%;<br />
        left: 0;</p>
<p>        -moz-box-sizing: border-box;<br />
        box-sizing: border-box;<br />
        display: block;<br />
        width: 18px;<br />
        height: 18px;<br />
        margin-top: -9px;</p>
<p>        background: #FFF;<br />
    }<br />
    .sample input[type=radio] + label::before {<br />
        border: 2px solid #ccc;<br />
        border-radius: 30px;<br />
    }<br />
    .sample input[type=checkbox] + label::before {<br />
        border: 2px solid #ccc;<br />
    }<br />
    .sample input[type=radio]:checked + label::after,<br />
    .sample input[type=checkbox]:checked + label::after {<br />
        content: &quot;&quot;;<br />
        position: absolute;<br />
        top: 50%;</p>
<p>        -moz-box-sizing: border-box;<br />
        box-sizing: border-box;<br />
        display: block;<br />
    }<br />
    .sample input[type=radio]:checked + label::after {<br />
        left: 5px;</p>
<p>        width: 8px;<br />
        height: 8px;<br />
        margin-top: -4px;</p>
<p>        background: #E71063;<br />
        border-radius: 8px;<br />
    }<br />
    .sample input[type=checkbox]:checked + label::after {<br />
        left: 3px;</p>
<p>        width: 16px;<br />
        height: 8px;<br />
        margin-top: -8px;</p>
<p>        border-left: 3px solid #E71063;<br />
        border-bottom: 3px solid #E71063;</p>
<p>        -webkit-transform: rotate(-45deg);<br />
        -ms-transform: rotate(-45deg);<br />
        transform: rotate(-45deg);<br />
    }</p>
<p>    /* either */<br />
    .sample .either {<br />
    	position: relative;</p>
<p>		display: inline-block;<br />
		width: 120px;<br />
		overflow: hidden;<br />
		border: 2px solid #ccc;<br />
    }<br />
    .sample .either input[type=radio] + label {<br />
		position: static;</p>
<p>		float: left;<br />
		display: block;<br />
		width: 50%;<br />
		margin-right: 0;<br />
        padding: 0;<br />
		overflow: hidden;</p>
<p>		text-align: center;<br />
    }<br />
    .sample .either input[type=radio] + label::before {<br />
		content: attr(data-label);</p>
<p>		top: 0;<br />
		bottom: 0;<br />
		z-index: 1;</p>
<p>		display: block;<br />
		width: 50%;<br />
		height: auto;<br />
        margin-top: 0;</p>
<p>		text-align: center;</p>
<p>    	color: transparent;<br />
    	background: transparent;<br />
		border: 0 none;<br />
		border-radius: 0;<br />
    }<br />
    .sample .either input[type=radio] + label:last-child::before {<br />
    	left: 50%;<br />
    	right: 0;</p>
<p>    }<br />
    .sample .either input[type=radio]:checked + label::before {<br />
    	color: #fff;<br />
    }</p>
<p>    .sample .either input[type=radio] + label::after {<br />
		border-radius: 0;<br />
    }<br />
    .sample .either input[type=radio]:first-child + label::after {<br />
		content: none;<br />
    }<br />
    .sample .either input[type=radio] + label + input[type=radio] + label::after {<br />
		content: &quot;&quot;;</p>
<p>		position: absolute;<br />
		top: 0;<br />
		bottom: 0;<br />
		z-index: 0;</p>
<p>		display: block;<br />
		width: auto;<br />
		height: auto;<br />
		margin: auto;</p>
<p>		background: #E71063;<br />
		border: 2px solid #fff;</p>
<p>		-webkit-transition: all 200ms;<br />
		transition: all 200ms;<br />
    }</p>
<p>    .sample .either input[type=radio]:checked + label + input[type=radio] + label::after {<br />
		left: 0;<br />
		right: 50%;<br />
    }<br />
    .sample .either input[type=radio] + label + input[type=radio]:checked + label::after {<br />
		left: 50%;<br />
		right: 0;<br />
    }</p>
<p>}<br />

関連記事