Question

https://www.thezone.org/ride/insertride.asp

在此页面上，单选按钮有一个字体很棒的图标响铃，而不是常规的单选按钮圈。当你选择一个选项时，环内应该有一个圆圈 - 就像在同一个网站的这个页面上一样：

https://www.thezone.org/application-camper.asp

选择似乎不起作用。我无法弄清楚为什么它在另一页上工作但不在这一页上。当我检查元素时，这个css（参见下面的其余部分）[type = radio]：checked + label：before {content：“\ f192”; font-family：FontAwesome;}没有显示，但它显示在另一个表单上。这是应该让小圆圈显示的css。

这是html：

<div class="form-group">
               <label class="control-label col-lg-3 col-sm-4" id="gender">
          Gender</label>
            <div class="col-sm-8 col-md-7 col-lg-8 full-input">
                <input type="radio" name="gender" value="Male" id="gender_0"     />
                <label class="radio-inline">Male</label>

                <input type="radio" name="gender" value="Female"     id="gender_1" />
                <label class="radio-inline">Female</label>

                <input type="radio" name="gender" value="Family" id="gender_2" />
                <label class="radio-inline">Family</label>
           </div>
        </div>

这是css：

[type=radio] {    display: none;}
[type=radio] + label:before {    content: "\f10c";  font-family:   FontAwesome;  font-size: 1.1em;    color: #028167;    letter-spacing: 10px;  display: inline-block;}
[type=radio]:checked + label:before {    content: "\f192";  font-family: FontAwesome;}

Answer 1

单击标签时没有任何操作，输入未被检查（单击）。因为您的标签上没有for属性！

For属性用于将标签链接到输入。因此，当您点击标签时，它会模拟＆＃39;点击输入。

示例：

<input type="text" name="test" id="link_to_me">
<label for="link_to_me">Click me</label>

以下是规范引用：

此属性显式关联正在定义的标签另一个控制。如果存在，则此属性的值必须为与。中某些其他控件的id属性的值相同同一份文件。如果不存在，则定义的标签与之相关联元素的内容。

Specification | MDN

带有字体图标的单选按钮不起作用

1 个答案: