日常工作中經常會用到單選框radio，而原生樣式不好看無法滿足項目要求，模擬寫一個又比較麻煩，所以寫了一個改變原生樣式的demo。
原生樣式：
改變后的樣式：
以下為demo代碼：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.input_radio li {
display: inline-block;
position: relative;
list-style: none;
}
.input_radio input[type="radio"] {
display: none;
}
.input_radio span {
padding: 0 12px;
display: inline-block;
background: #F4F4F4;
border: 1px solid #F4F4F4;
border-radius: 4px;
line-height: 28px;
text-align: center;
color: #2D333B;
cursor: pointer;
}
.input_radio input:checked+span {
background: rgba(93,142,216,0.16);
border-color: #5D8ED8;
color: #5D8ED8;
}
</style>
</head>
<body>
<ul class="input_radio">
<li>
<label for="optionLable00">
<input id="optionLable00" name="option0" type="radio" checked="checked">
<span class="option-label">橙色</span>
</label>
</li>
<li>
<label for="optionLable01">
<input id="optionLable01" name="option0" type="radio">
<span class="option-label">紅色</span>
</label>
</li>
</ul>
</body>
</html>