Question

为什么我的代码无法正常工作？
我希望它像这样工作： 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>

除了预装的Bootstrap脚本之外，我的网站上没有任何JS。

Answer 1

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

这样做是因为它使用相同的颜色悬停，当您单击该选项时，即该选项处于活动状态。然后，您可以通过将.agree分别替换为.neutral和.disagree，以相同的方式为中性和不同类定义css。

风格单选按钮不起作用

1 个答案: