带有字体真棒图标的单选按钮不起作用答案

【问题标题】：Radio buttons with font-awesome icons are not working带有字体真棒图标的单选按钮不起作用
【发布时间】：2017-06-02 01:05:03
【问题描述】：

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

【问题讨论】：

就像maverick说的，要么把for属性放在label上，要么把input元素放在label里面，让click函数指向输入字段。

标签： html css font-awesome

【解决方案1】：

当您的标签被点击时，没有任何反应，输入未被检查（点击）。因为您的标签上没有for 属性！

For 属性用于将标签链接到输入。因此，当您单击标签时，它会“模拟”对输入的单击。

例子：

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

这是规范的引述：

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

Specification | MDN

【讨论】：

@Shifra 如果答案是正确的并且是您正在寻找的内容，请将其标记为已解决。