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

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属性用于将标签链接到输入.因此,当您单击标签时,它会"模拟"对输入的单击.

例:

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

以下是规范引用:

此属性显式将正在定义的标签与另一个控件相关联.如果存在,则此属性的值必须与同一文档中某个其他控件的id属性的值相同.如果不存在,则定义的标签与元素的内容相关联.

规格 | MDN