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

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:

               
          Gender
            

                
                Male

                
                Female

                
                Family
           
        

这是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.. 6

单击标签时没有任何操作,不检查输入(单击).因为您for的标签上没有属性!

For属性用于将标签链接到输入.因此,当您单击标签时,它会"模拟"对输入的单击.

例:

Click me

以下是规范引用:

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

规格 | MDN

单击标签时没有任何操作,不检查输入(单击).因为您for的标签上没有属性!

For属性用于将标签链接到输入.因此,当您单击标签时,它会"模拟"对输入的单击.

例:

Click me

以下是规范引用:

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

规格 | MDN