自定义input单选框radio的样式

今天帮后端弄一个很古老的项目，要用原生方法改变radio的样式，顺便贴出来给大家分享

效果是这样的，当然你可以自己定义你喜欢的样式

HTML：

这里label 的for可以将lable和input关联起来

<div>
  <input id='one' checked type="radio" name="all" value="0"><label for="one" class="singleElection ">全部</label>
  <input id='two' type="radio" name="all" value="10"><label for="two" class="singleElection">香蕉</label>
  <input id='three' type="radio" name="all" value="40"><label for="three" class="singleElection">苹果</label>
 </div>

CSS

input:checked+label此处为相邻兄弟选择器相比其他选择器用的较少

 input[type="radio"]{
        opacity: 0;
        margin: -6px;
      }

input:checked+label  {   
        background-color: #3486e1;
        color: #ffffff;
      }
 .singleElection{
          display: inline-block;
          height: 32px;
          text-align: center;
          line-height: 32px;
          padding: 0 12px;
          margin-left: -5px;
          border: 1px solid #666666;
         }