Twitter Bootstrap Question posted in

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

the first one works but I am unable to change the color of the second (.fa ). I am able to change the font color while not active.

#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>
Tags:

2

Answers


  1. 0

    Since you want a yellow arrow, when the checkbox is only selected, only one css declaration is needed:

    #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>
    Login or Signup to reply.
  2. 0

    This one is fine…

    The neighbor ~ of the checkbox can only be the element with the icon-box class and not its child with class fa

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

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

    Proof:

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search