与字体真棒图标的单选按钮不起作用 [英] Radio buttons with font-awesome icons are not working

问题描述

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 =形式的基团> 
< label class =control-label col-lg-3 col-sm-4id =gender> 
性别< / label> 
< div class =col-sm-8 col-md-7 col-lg-8 full-input> 
< input type =radioname =gendervalue =Maleid =gender_0/> 
< label class =radio-inline>男性< / label> 
 
< input type =radioname =gendervalue =Femaleid =gender_1/> 
< label class =radio-inline>女性< / label> 
 
< input type =radioname =gendervalue =Familyid =gender_2/> 
< label class =radio-inline>系列< / label> 
< / div> 
< / div> 
  

以下是CSS：

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

解决方案

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

For属性用于将标签链接到一个输入。所以当你点击一个标签时，它会模拟输入点击。

示例：

 < input type =textname =testid =link_to_me> 
< label for =link_to_me>点击我< / label> 
  

以下是来自规范的报价：

该属性明确地将定义的标签与另一个控件的
相关联。如果存在，则此属性的值必须是
，与
同一文档中某个其他控件的id属性的值相同。当缺席时，被定义的标签与
元素的内容相关联。

规范 | MDN

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

On this page, the radio buttons have a font-awesome icon ring instead of the regular radio button circle. When you choose an option, there is supposed to be a circle inside the ring - like on this page on the same site:

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

The selecting doesn't seem to work. I can't figure out why it worked on the other page but not on this one. When I inspect element, this css (see below for the rest) [type=radio]:checked + label:before { content: "\f192"; font-family: FontAwesome;} doesn't show up, but it shows up on the other form. This is the css that's supposed to make the small circle show.

Here is the 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>

Here's the 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;}

解决方案

When your label is click nothing happens, the input isn't checked (clicked). Because you don't have a for attribute on your labels!

For attribute is used for linking a label to an input. So when you click on a label it 'simulates' a click on the input.

Example:

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

Here is a quote from specification:

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

这篇关于与字体真棒图标的单选按钮不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！