选中时无法更改字体真棒图标颜色 - 复选框

Question

第一个有效，但我无法更改第二个 (.fa) 的颜色。我可以在不活动时更改字体颜色。

#pgggo-sort-filter ul li label input[type="checkbox"]:checked ~ .icon-box{
  background: green;
  /* padding: 10px; */
}

#pgggo-sort-filter ul li label input[type="checkbox"]:checked ~ .fa{
  color: yellow;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />

<div id="pgggo-sort-filter" class="pgggo-sort-filter">
  <ul>
    <li>
        <label>
          <input type="checkbox" name="">
          <div class="icon-box">
            <i class="fa fa-arrow-circle-o-down" area-hidden="true"></i>
          </div>
        </label>
        <label>
          <input type="checkbox" name="">
          <div class="icon-box">
            <i class="fa fa-arrow-circle-o-up" area-hidden="true"></i>
          </div>
        </label>
    </li>
  </ul>
  <a class="button primary" href="#">Sort
  </a>
</div>

Answer 1

因为你想要一个黄色箭头，当复选框只被选中时，只需要一个css声明：

#pgggo-sort-filter ul li label input[type="checkbox"]:checked ~ .icon-box{
  background: green;
  /* padding: 10px; */
  color: yellow;
}

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body style="font-size:24px;">
 <div id="pgggo-sort-filter" class="pgggo-sort-filter">
              <ul>
                <li>
                   <label>
                     <input type="checkbox" name="">
                     <div class="icon-box">
                       <i class="fa fa-arrow-circle-o-down" area-hidden="true"></i>
                     </div>
                   </label>
                   <label>
                     <input type="checkbox" name="">
                     <div class="icon-box">
                       <i class="fa fa-arrow-circle-o-up" area-hidden="true"></i>
                     </div>
                   </label>
                </li>
              </ul>
             
</body>
</html>

Answer 2

这个不错...

复选框的邻居 ~ 只能是带有 icon-box class 的元素，而不是带有 class fa[=16 的子元素=]

input[type=checkbox]:checked ~ .icon-box{
  background: green;
}

input[type=checkbox]:checked ~ .icon-box .fa {
  color: yellow;
}

证明：

input[type=checkbox]:checked ~ .icon-box{
  background: green;
}

input[type=checkbox]:checked ~ .icon-box .fa {
  color: yellow;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />

<div id="pgggo-sort-filter" class="pgggo-sort-filter">
  <ul>
    <li>
      <label>
        <input type="checkbox" name="">
        <div class="icon-box">
          <i class="fa fa-arrow-circle-o-down" area-hidden="true"></i>
        </div>
      </label>
      <label>
        <input type="checkbox" name="">
        <div class="icon-box">
          <i class="fa fa-arrow-circle-o-up" area-hidden="true"></i>
        </div>
      </label>
    </li>
  </ul>
  <a class="button primary" href="#">Sort </a>
</div>

选中时无法更改字体真棒图标颜色 - 复选框

Unable to change font awesome icon color when checked - Check box

css

checkbox

font-awesome