html - 带有精美字体图标的单选按钮不起作用

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>

这是规范中的引述:

This attribute explicitly associates the label being defined with another control. When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents.

Specification | MDN