0

Font-Awesome 5 has svg support, but it changes my radiobutton into a svg element, and therefore I don't know how to get the onchange event. In the DOM if you inspect the radio buttons it looks like <svg ... > not <input ... >

HTML

<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>

<input id="radio1" type="radio" name="radio" class='fas fa-star fa-2x' > 
<input id="radio2" type="radio" name="radio" class='fas fa-star fa-2x' > 
<input id="radio3" type="radio" name="radio" class='fas fa-star fa-2x' > 
<input id="radio4" type="radio" name="radio" class='fas fa-star fa-2x' >

CSS

.svg-inline--fa 
{
  color : red;
}


.svg-inline--fa:hover
{
  color : blue;
}

.svg-inline--fa:checked
{
  color : yellow; /* does not work */
}

http://jsfiddle.net/patrickinminneapolis/45pLwrvz/44/

patrick
  • 16,091
  • 29
  • 100
  • 164

1 Answers1

1

I suggest you use separate elements for the icon and the radio input.

<label class="radio" for="rating1">
   <i class='fas fa-star'></i>
   <input type="radio" value=1 name="rating" id='rating1' style='display: none;'>
</label>

The input may be visually hidden, but clicking the label which contains the icon, is like click the input

dstrants
  • 7,423
  • 2
  • 19
  • 27
  • I'm not going to be able to catch the radiobutton change event if the radiobutton is hidden – patrick Apr 12 '18 at 19:46
  • Actually using the for attribute on the label I am able to catch the change event and post Ajax calls. Have tried it and it did not work? – dstrants Apr 13 '18 at 05:08
  • 1
    I was trying to catch the 'checked' event but I should have been catching the 'onchange' event – patrick Apr 13 '18 at 14:21