Невозможно изменить шрифт, цвет значка при установленном флажке - флажок - PullRequest
Новая
       9

Невозможно изменить шрифт, цвет значка при установленном флажке - флажок

0 голосов
/ 31 октября 2019

первый работает, но я не могу изменить цвет второго (.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>

Ответы [ 2 ]

1 голос
/ 31 октября 2019

Поскольку вам нужна желтая стрелка, когда флажок установлен только, требуется только одна декларация 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>
0 голосов
/ 31 октября 2019

Это нормально ...

Соседом ~ флажка может быть только элемент с классом icon-box, но не его дочерний элемент с классом fa

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