Question

我想设置单选按钮的样式，以便圆圈内的黑点例如是红色。

互联网上有几个例子可供选择：JSFIDDLE。这个例子就是它在Internet Explorer中不起作用。

另一个使我的情况更难的一点是，由于实现要求，我不能将任何其他html对象添加到以下代码中：

<span class="custom-radio">
    <input id="id4" type="radio" name="id_test" value="">
    <label for="id4">No</label>
</span>

我的问题是：如何在不向上面的代码添加额外HTML的情况下创建自定义单选按钮，并且仍然可以在大多数浏览器（IE，FF，Chrome）中使用

Answer 1

更改蜱/球的颜色，您可以使用::before：

input:checked ~ label::before{
  content: "";
  background: #F90 none repeat scroll 0% 0%;
  width: 8px;
  height: 8px;
  position: absolute;
  border-radius: 20px;
  left: 7px;
  top: 5px; 
}

这是一个fiddle

n.b。您将定位::before元素，因此在您的应用中使用时需要将其调整到正确的位置

Answer 2

试试此链接 Styling Radio Buttons with CSS

更新：代码（从上面链接复制/过去）：

<input id="choice-a" type="radio" name="g" />
        <label for='choice-a'>
            <span><span></span></span>
            Choice A
        </label>
input[type="radio"] {
  opacity: 0;
  position: absolute;
}
/* Matches the direct descendant of a label preceded by a 
   radio button */
input[type="radio"] + label > span {
  position: relative;
  border-radius: 14px;
  width: 20px;
  height: 20px;
  background-color: #f0f0f0;
  border: 1px solid #bcbcbc;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
  margin: 0 1em 0 0;
  display: inline-block;
  vertical-align: middle;
}

/* Matches the direct descendant of a label preceded by a 
   checked radio button */
input[type="radio"]:checked + label > span {
  background: linear-gradient(#a0e5f8, #75c7dc);
  background: -webkit-linear-gradient(#a0e5f8, #75c7dc);
  border-color: #41a6bf;
  box-shadow: 0px 1px 2px rgba(65, 166, 191, 0.9) inset;
}

/* Matches a span contained by the direct descendant 
   of a label preceded by a checked radio button */
input[type="radio"]:checked + label > span span {
    display: inline-block;
    width: 8px;
    height: 8px;
    position: absolute;
    left: 6px;
    top: 6px;
    border-radius: 5px;
    border: none;
    background: #167c95;
    box-shadow: 0px 1px rgba(255, 255, 255, 0.3);
}

input[type="radio"]:focus + label > span {
  box-shadow: 0px 0px 6px rgba(63, 165, 190, 1);
}

Fiddle example

Answer 3

你不能在IE中这样做，因为它不允许你在:before元素上使用input，至少根据this answer。我认为在您的情况下，您唯一能做的就是尝试在标签上添加:before并将其放在复选框上。

Answer 4

为什么甚至根本使用input[type="radio"]元素？您可以在html，css和javascript中重新创建，并提供比任何疯狂的CSS :before，:after更好的浏览器支持。这是代码和工作jsfiddle：以下是小提琴的链接：https://jsfiddle.net/www139/ba5jn2e6/19/

希望这可以帮助其他任何人解决问题。我经历了同样的困境，所以我决定从头开始创建它！

＆＃13;

window.onload = function(){
    var radioButtonGroups = document.getElementsByClassName('radioGroupContainer');
    for(var i = 0; i != radioButtonGroups.length; i++)
    {
         var radioButtons = radioButtonGroups[i].getElementsByClassName('radioButtonContainer');
        for(var i = 0; i != radioButtons.length; i++)
        {
            radioButtons[i].onclick = function(){
                var value = this.children[0].getAttribute('name');
                for(var i = 0; i != radioButtons.length; i++)
                {
                     radioButtons[i].children[0].setAttribute('class','radioButtonDot');   
                }
                this.children[0].setAttribute('class','radioButtonDotActive');
                this.parentNode.setAttribute('name',value);
            };   
        }
    }
};

＆＃13;

/*
* Created by William Green.
* Questions or comments? Email william.green@protonmail.com
* I would appreciate credit for this code if you use it; but it is not required.
* Last updated July 26, 2015
* Created July 26, 2015
*
*/




.radioButtonContainer {
    background-color:#eee;
    padding:5px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    display:table;
    margin-top:5px;
    margin-bottom:5px;
}

.radioButtonContainer .radioButtonDot {
    width:16px;
    height:16px;
    background-color:transparent;
    border:1px solid #000;
    display:inline-block;
    vertical-align:middle;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
    -o-transition:all .5s ease;
    -moz-transition:all .5s ease;
    -webkit-transition:all .5s ease;
    -ms-transition:all .5s ease;
    transition:all .5s ease;
}

.radioButtonContainer .radioButtonDotActive {
    width:16px;
    height:16px;
    background-color:#1396DE;
    border:1px solid transparent;
    display:inline-block;
    vertical-align:middle;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
    -o-transition:all .5s ease;
    -moz-transition:all .5s ease;
    -webkit-transition:all .5s ease;
    -ms-transition:all .5s ease;
    transition:all .5s ease;
}

.radioButtonContainer .radioButtonLabel {
    background-color:transparent;
    display:inline-block;
    vertidal-align:middle;
    border:0;
}

＆＃13;

<div class="radioGroupContainer" id="radioChoicesOne">
    <div class="radioButtonContainer">
        <div class="radioButtonDot" name="optionOne"></div>
        <input type="button" class="radioButtonLabel" value="Option One">
    </div>
    <div class="radioButtonContainer">
        <div class="radioButtonDot" name="optionTwo"></div>
        <input type="button" class="radioButtonLabel" value="Option Two">
    </div>
    <div class="radioButtonContainer">
        <div class="radioButtonDot" name="optionThree"></div>
        <input type="button" class="radioButtonLabel" value="Option Three">
    </div>
</div>
        
        <div id="radioButtonGroupOneValue"></div>
        <input type="button" value="Get radio button value..." onclick="document.getElementById('radioButtonGroupOneValue').innerHTML = document.getElementById('radioChoicesOne').getAttribute('name');">

＆＃13;

定制样式radiobuttons

4 个答案: