如何风格，边框和颜色的单选按钮

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

您的输入元素这是无效的CSS上应用:after and :before。所以，你需要换其他东西像一个div实现这一目标。股利将使用检查值电台，并与: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在我的网站中使用here联系我们表格检查这一个

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/