如何設置帶邊框和顏色的單選按鈕的樣式

Question

給我的單選按鈕的不同顏色以及邊框顏色的最佳方法是什么？

我嘗試使用此代碼，但它似乎並不完美。

 li.payment_method_bacs input[type='radio']:checked:before { background: black !important; content: ""; display: block; position: relative; top: 19px; left: 3px; width: 6px; height: 6px; border-radius: 50%; border: 3px solid black; } li.payment_method_bacs input[type='radio']:checked:before { background: black !important; content: ""; display: block; position: relative; top: 19px; left: 3px; width: 6px; height: 6px; border-radius: 50%; border: 3px solid black; } 

 <input id="payment_method_bacs" type="radio" class="input-radio" name="payment_method" value="bacs" data-order_button_text="" checked="checked"> 

Answer 1

您正在應用:after and :before 輸入元素 對css無效 。 所以你需要包裝其他東西， 比如div來實現這一點。 div將使用radio的checked值和:after and :before元素將根據需要執行操作。 我正在使用2種方法。

方法1：使用div作為虛假元素：

 li { list-style: none; display:inline-block; margin-right:20px; } .radioBox { position: relative; background: transparent; z-index: 1; width: 13px; height: 13px; cursor: pointer; } .radioBox>div { position: absolute; z-index: 0; top: 0; left: 0; width: 13px; height: 13px; display: inline-block; border: 2px solid black; border-radius: 12px; } .radioBox>input { position: absolute; z-index: 2; width: 13px; height: 13px; opacity: 0; } .radioBox > input:checked + div:after { position: absolute; content: " "; font-size: 0; display: block; left: 1px; top: 1px; width: 10px; height: 10px; background: black; border-radius: 10px; } 

 <ul> <li class="payment_method_bacs"> <div class="radioBox "><input id="payment_method_bacs" type="radio" class="input-radio" name="payment_method" value="bacs" data-order_button_text="" > <div></div> </div> </li> <li> <div class="radioBox "> <input id="payment_method_bacs1" type="radio" class="input-radio" name="payment_method" value="bacs" data-order_button_text="" checked="checked" > <div></div> </div> </li> </ul> 

方法2：使用標簽作為人造元素。

 ul,li{list-style:none; display:inline-block;} label { display: inline-block; cursor: pointer; position: relative; padding-left: 25px; margin-right: 15px; font-size: 13px; } input[type=radio] { display: none; } label:before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 10px; position: absolute; left: 0; bottom: 1px; background-color: #fff; border:1px solid #000; border-radius:50%; } .radio label:before { border-radius: 8px; } input[type=radio]:checked + label:before { content: "\\2022"; color: #000; font-size: 30px; text-align: center; line-height: 18px; } 

 <ul> <li> <div class="radio"> <input id="payment_method_bacs" type="radio" class="input-radio" name="payment_method" value="bacs" data-order_button_text="" checked="checked"> <label for="payment_method_bacs">Visa</label> </div> </li> <li> <div class="radio"> <input id="payment_method_bacs1" type="radio" class="input-radio" name="payment_method" value="bacs" data-order_button_text="" > <label for="payment_method_bacs1">Paypal</label> </div> </li> </ul> 

Answer 2

如果復選框將檢查，那么在輸入和標簽輸入中添加html將隱藏，而不是在標簽中添加任何樣式

 input[type="radio"] { display: none; } input[type="radio"]:checked + label::before { background: red none repeat scroll 0 0; border: 0 solid #333; content: ""; font-size: 0; height: 20px; width: 20px; } 

 <span class="input-lif in-lidt"> <input class="contact_radio" id="rbsrt1" name="contact" value="individual" checked="checked" type="radio"> <label for="rbsrt1"> Individual </label> </span> 

使用IAM在我的網站在這里聯絡形成我們檢查了這一個

Answer 3

更改表單輸入的外觀有點棘手，因為每個瀏覽器以不同的方式呈現它們。

為了確保您為不同的瀏覽器獲得相同的結果，您可以考慮使用圖像（內聯，或作為包含輸入的元素的背景圖像）或元素作為輸入顯示。

  <label id="myLabel" for="payment_method_bacs">
    <input id="payment_method_bacs" 
      type="radio" 
      class="input-radio" 
      name="payment_method" 
      value="bacs" 
      data-order_button_text="" 
      checked="checked">
  </label>

  #myLabel{
      width: 20px;
      height: 20px;
      background: white;
      -moz-border-radius: 50px;
      -webkit-border-radius: 50px;
      border-radius: 50px;
      border:2px solid #ccc;
      display:inline-block;
  }

  #myLabel input{
      display:none;
  }

小提琴在這里提供： https ： //jsfiddle.net/omfv8qhj/