CODEWITHSUNDEEP
htmlcssfont-awesome
Shifra
Shifra

Reputation: 41

Radio buttons with font-awesome icons are not working

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

Upvotes: 0

Views: 5289

Answers (1)

Maverick
Maverick

Reputation: 886

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

Upvotes: 6

Related Questions