タグ:

横二つ

HTML

    <div class="sample">
      <input type="radio" name="s2" id="y" value="1" checked="">
      <label for="y">Yes</label>
      <input type="radio" name="s2" id="n" value="0">
      <label for="n" class="switch-off">No</label>
      <br style="clear:both;" />
    </div>

CSS

.sample{
  margin-bottom:25px;
  clear:both;
}
.sample input {
  display: none;
}
.sample label{
  display: block;
  float: left;
  cursor: pointer;
  margin: 0;
  padding:8px 16px;
  background-color: #BBDEFB;
  color: #FFF;
  text-align: center;
  transition: 0.2s;
  width:40px;
}
.sample label:first-of-type{
  border-radius: 3px 0 0 3px;
}
.sample label:last-of-type{
  border-radius: 0 3px 3px 0;
}
.sample input[type="radio"]:checked + label{
  background-color: #2196F3;
}

ラジオボタンは装飾する事は限られているため、label要素のfor属性を使用して、疑似的にラジオボタンとして機能させます。ラジオボタンが選択されているかの判断はchecked属性で判断し、その次の要素をセレクタで指定してあげれば、ラジオボタンに連動してスタイルが変わるlabelが出来上がります。


横2つ以上

HTML

<div class="sample2">
  <input name="s3" id="select1" type="radio" checked="" value="1">
   <label for="select1">横1</label>
   <input name="s3" id="select2" type="radio" value="2">
   <label for="select2">横2</label>
   <input name="s3" id="select3" type="radio" value="3">
   <label for="select3">横3</label>
   <input name="s3" id="select4" type="radio" value="4">
   <label for="select4">横4</label>
   <input name="s3" id="select5" type="radio" value="5">
   <label for="select5">横5</label>
   <br style="clear:both;" />
</div>

CSS

.sample2{
  margin-bottom:25px;
  clear:both;
}
.sample2 input{
	display: none;
}
.sample2 label{
	display: block;
	float: left;
	cursor: pointer;
	width: 53px;
	margin: 0;
	padding: 12px 5px;
	border-right: 1px dotted #FFF;
	background-color: #BBDEFB;
	color: #FFF;
	text-align: center;
	line-height: 1;
	transition: .2s;
}
.sample2 label:first-of-type{
	border-radius: 3px 0 0 3px;
}
.sample2 label:last-of-type{
	border-right: 0px;
	border-radius: 0 3px 3px 0;
  border-right:none;
}
.sample2 input[type="radio"]:checked + label {
	background-color: #2196F3;
}

途中にボーダーの設定を増やしたりしましたが、基本的には横二つの時と同じです。