自定義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;
         }