label要素の中に「input type="radio"」とspan要素を入れ、「display:none」を使って、本来のradioボタンの形状を消します。:checked擬似クラスでチェックされているボタンを判定し、隣接セレクタでそれに隣接するspan要素を選び、:before疑似要素、:after疑似要素を使って、きれいなradioボタン形状を再描画しています。

サンプル

サンプルの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: absolute;
	content: "";
	top: 50%;
	left: -15px;
	margin-top: -15px;
	width: 30px;
	height: 30px;
	background: #FFFFFF;
	border-radius: 50%;
	border: 5px solid #fdc096;
	box-sizing: border-box;
	}
  div.wrap ul li input.rbtn:checked + .mark:before {
	border: 5px solid #ea721f;
	}
  div.wrap ul li input.rbtn:checked + .mark:after {
	position: absolute;
	content: "";
	top: 50%;
	left: -5px;
	margin-top: -5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #ea721f;
	box-sizing: border-box;
	}