「CSS3　隣接セレクタと擬似クラス、疑似要素を使って、きれいなradioボタン」の（２）です。 「CSS3　隣接セレクタと擬似クラス、疑似要素を使って、きれいなradioボタン」の（１）では、 span要素に、:before疑似要素、:after疑似要素を使って、borderとborder-radiusで円を描いていましたが、この（２）では、同じような形状のIonicons webアイコンフォントを利用しています。

サンプルのhtmlは（１）と同じです。CSSのみ変更しています。

サンプル

サンプルのhtmlのソース

<ul>
	<li><label><input type="radio" name="city" class="rbtn"><span class="mark"></span>東京</label></li>
	<li><label><input type="radio" name="city" class="rbtn"><span class="mark"></span>大阪</label></li>
	<li><label><input type="radio" name="city" class="rbtn"><span class="mark"></span>名古屋</label></li>
</ul>

サンプルのCSSのソース

  div.wrap ul li input.rbtn {
	display: none;
	}
  div.wrap ul li input.rbtn + .mark:before {
	position: relative;
	left: -15px;
	top:4px;
	content: "\f3a6";
	font-family: "Ionicons";
	color: #fdc096;
	font-size:32px;
	}
  div.wrap ul li input.rbtn:checked + .mark:before {
	position: relative;
	left: -15px;
	top:3px;
	content: "\f3a7";
	font-family: "Ionicons";
	color: #ea721f;
	font-size:32px;
	}

 

webアイコンフォントを利用していますので、形状の変更は、「content:」の文字コードを書き換えるだけなので容易です。
次のサンプル２は、radioボタンの形状をチェックボックス風の形状に変更しています。

サンプル２

サンプル２のCSSソース（変更部分のみ）

  div.wrap2 ul li input.rbtn + .mark:before {
	position: relative;
	left: -15px;
	top:4px;
	content: "\f372"; //このコードのみ変更
	font-family: "Ionicons";
	color: #fdc096;
	font-size:32px;
	}
  div.wrap2 ul li input.rbtn:checked + .mark:before {
	position: relative;
	left: -15px;
	top:3px;
	content: "\f373"; //このコードのみ変更
	font-family: "Ionicons";
	color: #ea721f;
	font-size:32px;
	}