在實際專案中radio單選按鈕的預設樣式是很討厭的  很多地方用了跟主色調不一樣很突兀  我在網上查了查自己改了一個

<dd>
    <label>
	    <input type="radio" checked="checked" name="classId" class="radio" value="1"> 商品諮詢
		<i></i>
	</label> 
	<label> 
		<input type="radio" name="classId" class="radio" value="2"> 支付問題
		<i></i>
	</label> 
	<label> 
		<input type="radio" name="classId" class="radio" value="3"> 發票及保修
		<i></i>
	</label>
</dd>
 

css

label {
    font-size: 12px;
    vertical-align: top;
    display: flex;
    margin-right: 20px;
    float: left;
    position: relative;
    font-weight: 400;
    color: #0c4757;
    padding-left: 25px;
    cursor: pointer;
}
label .text { display: inline-block; vertical-align: middle; padding: 2px 4px;}
label .radio {
    position: absolute;
    left: -9999px;
}
label .radio i {
    display: block;
    position: absolute;
    top: 6px;
    left: 0;
    width: 15px;
    height: 15px;
    outline: 0;
    border: 1px solid #e4e4e4;
    background: #ffffff;
    border-radius: 50%;
    transition: border-color .3s;
    -webkit-transition: border-color .3s;
}

label input + i:after {
    position: absolute;
    content: '';
    top: 2px;
    left: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border:1px solid #e5e5e5;
}

label input:checked + i:after{
    border:1px solid #333;
    background-color: #333;
}
 

最終效果是這樣的