Question

Font-Awesome 5有svg支持，但它将我的radiobutton更改为svg元素，因此我不知道如何获取onchange事件。在DOM中，如果您检查单选按钮，它看起来像<svg ... >而不是<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/

Answer 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>

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

在fontawesome将radiobutton更改为svg元素后检测已检查事件

1 个答案: