如何设置带边框和颜色的单选按钮的样式

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/