技術標籤：前端

自定義修改input=radio的樣式

• 前言
• 實現

前言

鑑於在移動端開發中用到的移動端的元件庫內沒有符合UI設計要求的radio樣式，只能使用最原始的input來造成符合需求的框

實現

樣式與原始的差不多，只是選中的顏色改成綠色

		<input
        id="inputChoice1"
         v-model="advice"
         class="select"
         type="radio"
         :disabled=
 
"!isLeader"
         name="leaderadvice"
         value="choice1"
       />
       <label for="inputChoice1"></label>
       <span>choice1</span>
       <input
         id="inputChoice2"
         v-model="advice"
         class
 
="select"
         type="radio"
         :disabled="!isLeader"
         name="leaderadvice"
         value="choice2"
       />
       <label for="inputChoice2"></label>
       <span>choice2</span>

選中時：

禁用時

樣式的修改主要還是藉助各種選擇期，以及將選中框的樣式寄託在label上

樣式程式碼如下

//將input的圓框隱藏
 input[type='radio'] {
    width: 0.32rem;
    height: 0.32rem;
    display: none;
  }
//定位label到圓框的位置，並修改樣式為圓框
  label {
    position: relative;
    top: 0.1rem;
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 50%;
    border: 1px solid #999;//預設為邊框
  }

  /*設定選中的radio的樣式*/
  /* + 是兄弟選擇器,獲取選中後的label元素*/
  input:checked + label {
    background: url('../../../assets/images/mobile/icon-check.png'); //直接藉助背景圖片
    border: none;
  }
   /*設定禁用的radio的樣式*/
  input:checked[disabled] + label {
    background: url('../../../assets/images/mobile/icon-check-disabled.png');
    border: none;
  }