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/

4

1 回答 1

1

我建议您为图标和无线电输入使用单独的元素。

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

输入可能会在视觉上隐藏，但单击包含图标的标签就像单击输入

于 2018-04-12T18:54:37.193 回答