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; ?}然后对这个添加一个伪类
.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
css 模拟radio的样式
原文地址：https://www.cnblogs.com/adouwt/p/9073203.html