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

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

スタイル適用前

スタイル適用後

ソース

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

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

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

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

関連記事

Pocket