风格单选按钮将不起作用

为什么我的代码无法正常工作？
我希望它是这样工作的： https://www.16personalities.com/free-personality-test 风格单选按钮将不起作用

这里北京时间我的代码：
https://jsfiddle.net/DTcHh/29845/

<div class="hidden-xs col-sm-3 caption left" onclick="setAnswer(2, -3);">Agree</div> 
         <div class="col-sm-6 col-xs-12" data-toggle="buttons" aria-label="Options"> 
          <fieldset id="group2"> 
           <label class="btn agree max" onclick="setAnswer(2, -3);"> 
            <input type="radio" name="group2" autocomplete="off"> 
           </label> 
           <label class="btn agree med" onclick="setAnswer(2, -2);"> 
            <input type="radio" name="group2" autocomplete="off"> 
           </label> 
           <label class="btn agree min" onclick="setAnswer(2, -1);"> 
            <input type="radio" name="group2" autocomplete="off"> 
           </label> 
           <label class="btn neutral" onclick="setAnswer(2, 0);"> 
            <input type="radio" name="group2" autocomplete="off"> 
           </label> 
           <label class="btn disagree min" onclick="setAnswer(2, 1);"> 
            <input type="radio" name="group2" autocomplete="off"> 
           </label> 
           <label class="btn disagree med" onclick="setAnswer(2, 2);"> 
            <input type="radio" name="group2" autocomplete="off"> 
           </label> 
           <label class="btn disagree max" onclick="setAnswer(2, 3);"> 
            <input type="radio" name="group2" autocomplete="off"> 
           </label> 
          </fieldset> 
         </div> 
         <div class="hidden-xs col-sm-3 caption right" onclick="setAnswer(2, 3);">Disagree</div>

我没有任何JS我的网站上，除了预装的引导脚本。

来源

2017-02-14 HenThai

I forked your jsfiddle进行更改。

要定位输入元素，请使用属性选择器。因此，对于您的情况，您可以通过执行此操作来定位单选按钮input[type="radio"]{..insert css properties here..}。由于您不想显示单选按钮，因此您将不透明度设置为0.您还使用z-index确保它完全消失，并且可以将z-index设置为您选择的任何值，但让在这里表现自己，并将其设置为-1。这应该有助于隐藏单选按钮。

input[type="radio"] { 
    opacity: 0; 
    z-index: -1; 
}

或者，您可以将其设置为不显示任何值。

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

上述两个属性都可以很好地隐藏单选按钮。

继续前进，而不是使用：active和：focus伪选择器，我已经使用了您指定的标签类。同意，中立和不同意将背景更改为相应的颜色。

因此，在为.btn类指定css属性之后，然后使用伪类悬停并设置鼠标悬停的背景颜色，然后定位.active类以将背景颜色永久设置为指定的颜色。

.btn.agree:hover, .btn.agree.active{ 
    color: #4C9070; 
    background-color: #4C9070; 
}

这是做什么的，它使用相同的颜色悬停，当你点击该选项，即该选项是活动的。然后，您可以用相同的方式为中性和不同意类定义css，分别用.neutral和.disagree替换.agree。

来源

2017-02-14 12:21:37

风格单选按钮将不起作用

回答

相关问题