1、input 預設的 type 為 radio的樣式，在具體場合中的改造
預設的樣式這樣：
但是我要這樣的：
這樣看來是不是比原來的好看多了。
2、優化radio的樣式
<span class="answer-item-wrapper" :class="{ active: chooseNum === index }" @click="selectItem(index)">
<span class="select-wrapper">
</span>
<span class="select-content">
{{val}}
</span>
</span>
這個是vue的一個例子，點選一個元素給它追加一個class。當然這個不是重點，重點是 紅色部分，我們需要對紅色部分進行css描述。
.select-wrapper {
display: inline-block;
height: 16px;
width: 16px;
background-color: #fff;
border: 1px solid #d4a668;
border-radius: 100%;
margin-right: 10px;
margin-top: -1px;
vertical-align: middle;
line-height: 1;
}
然後對這個添加一個僞類
.answer-item-wrapper.active .select-wrapper::after { content: "";
display: inline-block;
height: 12px;
margin: 2px;
width: 12px;
background-color: #cd9a51;
border-radius: 100%;
}
OK 這樣的 話， 就可以實作了radio這樣按鈕的格式。
3、直接對input的一種改造
具體見完整demo,參考另外一個同學的寫法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.demo--label{margin:20px 20px 0 0;display:inline-block}
.demo--radio{display:none}
.demo--radioInput{background-color:#fff;border:1px solid #cd9a51;border-radius:100%;display:inline-block;height:16px;margin-right:10px;margin-top:-1px;vertical-align:middle;width:16px;line-height:1}
.demo--radio:checked + .demo--radioInput:after{background-color:#cd9a51;border-radius:100%;content:"";display:inline-block;height:12px;margin:2px;width:12px}
.demo--checkbox.demo--radioInput,.demo--radio:checked + .demo--checkbox.demo--radioInput:after{border-radius:0}
</style>
</head>
<body>
<div>
<input type="radio" name="demo-radio"> 我是radio
<div></div>
<label class="demo--label">
<input class="demo--radio" type="radio" name="demo-radio">
<span class="demo--radioInput"></span>我是radio
</label>
<div></div>
<label class="demo--label">
<input class="demo--radio" type="radio" name="demo-radio">
<span class="demo--radioInput"></span>我是另一個radio
</label>
</div>
</body>
</html>
截圖如下：
附錄： 第一個例子是用vue的一個方法，添加active ，然後，對這個有active的 元素下的子元素進行css描述。這個給目前元素添加class的方法解釋，請挪步至另一篇筆記：
https://www.cnblogs.com/adouwt/p/7911639.html