自定义样式单选按钮答案

【问题标题】：Custom style radiobuttons自定义样式单选按钮
【发布时间】：2015-10-04 14:06:22
【问题描述】：

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

互联网上有几个类似这样的示例：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）中使用

【问题讨论】：

什么版本的IE？
给出的示例甚至在 IE10 中都不起作用，但我会说 IE9 和 IE10 @atmd
我有制作自定义单选按钮的代码。我认为浏览器支持可能和 IE8 一样好，甚至更早。它不是传统的，因为它是完全自定义的，就像基本上用 html、css 和 javascript 重新制作单选按钮一样。代码并不难。我会在今天晚些时候发布。

标签： html css

【解决方案1】：

试试这个链接 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

【讨论】：

这不符合我的要求，就像我说的，我不能添加任何额外的 HTML 对象。因此，这对我不起作用。不过很好的例子。
@Rotan075 对不起......我误读了“没有添加额外的 HTML”......再次抱歉，我的错 :(
哈哈没问题！无论如何感谢您的帮助！ ;)

【解决方案2】：

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

【讨论】：

根据链接是

【解决方案3】：

要更改刻度/球的颜色，您可以使用::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 元素，因此在您的应用程序中使用时需要将其调整到正确的位置

【讨论】：

【解决方案4】：

您可以使用display:none 隐藏输入本身，并在label 上使用伪元素

input[type='radio'] {
display: none;
}

input[type='radio'] + label {
    position: relative;
    line-height: 1em;
}

input[type='radio'] + label:before {
    content: '';
    width: .5em;
    height: .5em;
    border-radius:100%;
    margin-right: .5em;
    display: inline-block;
    background: red;
    vertical-align: middle;
    box-shadow: 0 0 0 .1em white, 0 0 0 .2em black;
}

input[type='radio']:checked + label:before {
    background: green;
    vertical-align: middle;
}

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

之后，只需为伪元素设置样式即可，

【讨论】：

是否仍然可以使点例如 10x10 像素和输入 20x20 或者这不可能？
当然……随便玩吧。我使用的尺寸只是示例。

【解决方案5】：

只需使用隐藏单选 input 元素和样式 span 元素的组合，这些元素包裹在 label 元素中，并相应地设置样式：

input[type=radio] {
  display: none;
}
span {
  border-radius: 100%;
  height: 20px;
  width: 20px;
  display: inline-block;
  border: 1px solid;
  position: relative;
}
input[type=radio]:checked + span:before {
  content: '';
  position: absolute;
  height: 50%;
  width: 50%;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  background: green;
  border-radius: 100%;
}

<label>
  <input type="radio" name="myRadio" />
  <span></span>Item 1
</label>
<label>
  <input type="radio" name="myRadio" />
  <span></span>Item 2
</label>
<label>
  <input type="radio" name="myRadio" />
  <span></span>Item 3
</label>

【讨论】：

这不符合我的要求，就像我说的，我不能添加任何额外的 HTML 对象。因此，这对我不起作用。很好的例子！

【解决方案6】：

您不能更改单选按钮或复选框的属性，但可以模拟它们。保持 HTML 不变，并将其添加到 CSS 中。

.custom-radio input[type=radio] {
    display:none;
}
.custom-radio label {
    display:inline-block;
}
.custom-radio label:before {
    content:"";
    display:inline-block;
    width:16px;
    height:16px;
    border-radius:50%;
    background:url("http://s17.postimg.org/p1q2imsln/radio.png");
    background-position:0% 0%;
}
.custom-radio label:hover:before {
    background-position:0% 100%
}
.custom-radio input[type=radio]:checked~label:before {
    background-position:100% 0%;
}
.custom-radio input[type=radio]:checked~label:hover:before {
    background-position:100% 100%;
}

只需提供一个遵循链接中带有红色单选按钮的模板的图像。

【讨论】：

【解决方案7】：

为什么还要使用input[type="radio"] 元素呢？您可以在 html、css 和 javascript 中重新创建，并提供比任何疯狂的 css :before、:after 东西更好的浏览器支持。这是代码和一个有效的jsfiddle：这是小提琴的链接：https://jsfiddle.net/www139/ba5jn2e6/19/

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

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);
            };   
        }
    }
};

/*
* 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;
}

<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');">

【讨论】：