rotate ::before background image for label when checkbox is checked-CodePudding

I have a checkbox where I swapped out the checkbox itself for an image using ::before. I do this so I can toggle a div open and closed. This is working fine.

I would also like to rotate the image when the checkbox is checked, this is not working.

I created a codepen https://codepen.io/justinblayney/pen/OJwRvBE

It is line 86 of the css in codepen where I am trying to target the ::before and rotate it

.filter-buttons #box:checked ~ .filter-checkbox::before {
  transform: rotate(180deg);
}

.filter-buttons {
  margin-top: 20px;
}
@media (min-width: 768px) {
  .filter-buttons {
    margin-top: 50px;
  }
}
.filter-buttons .filter-dropbtn {
  background: #e0e1e1 0% 0% no-repeat padding-box;
  border-radius: 25px;
  color: #2130b2;
  font: normal normal normal 20px/24px Gibson;
  letter-spacing: 0;
  padding-left: 25px;
  text-align: left;
  width: 275px;
}
@media (min-width: 768px) {
  .filter-buttons .filter-dropbtn {
    width: 325px;
  }
}
.filter-buttons .filter-dropdown {
  display: inline-block;
  position: relative;
}
.filter-buttons .filter-dropdown form .filter-checkbox::before {
  background-image: url(data:image/svg xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI3LjEuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDUwIDUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MCA1MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiMyMTMwQjI7fQoJLnN0MXtmaWxsOiNGRkZGRkY7fQo8L3N0eWxlPgo8ZyBpZD0iTGF5ZXJfMiI Cgk8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIyNSIgY3k9IjI1IiByPSIyNC45Ii8 CjwvZz4KPGcgaWQ9IkxheWVyXzEiPgoJPGcgaWQ9ImFycm93X2RvdWJsZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIpIHJvdGF0ZSg5MCkiPgoJCTxwYXRoIGlkPSJQYXRoXzE1NyIgY2xhc3M9InN0MSIgZD0iTTI2LjMtN2wtMS43LTEuN2w0LjMtNC4zbC00LjMtNC4zbDEuNy0xLjdsNiw2TDI2LjMtN3oiLz4KCQk8cGF0aCBpZD0iUGF0aF8xNTgiIGNsYXNzPSJzdDEiIGQ9Ik0xOS40LTdsLTEuNy0xLjdMMjItMTNsLTQuMy00LjNsMS43LTEuN2w2LDZMMTkuNC03eiIvPgoJPC9nPgo8L2c Cjwvc3ZnPgo=);
  background-repeat: no-repeat;
  background-size: 100%;
  content: "";
  display: inline-block;
  height: 44px;
  position: absolute;
  right: 20px;
  width: 44px;
}
.filter-buttons .filter-dropdown form input {
  visibility: hidden;
}
.filter-buttons .filter-content {
  background: #f0f0f0 0% 0% no-repeat padding-box;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.16078);
  display: none;
  list-style: none;
  margin-top: 0;
  padding: 0 10px 15px;
  position: absolute;
  width: 275px;
  z-index: 100;
}
@media (min-width: 768px) {
  .filter-buttons .filter-content {
    width: 325px;
  }
}
.filter-buttons .filter-content li::before {
  content: "";
  list-style: none;
}
.filter-buttons .filter-content li {
  border-bottom: 1px solid #2130b2;
  list-style: none;
}
.filter-buttons .filter-content li a[href]:not(.button) {
  color: #333;
  letter-spacing: 0;
  text-decoration: none;
}
.filter-buttons .filter-content li a[href]:not(.button):hover {
  color: #2130b2;
}
.filter-buttons .filter-content li .parent {
  font: normal normal 600 20px/34px Gibson;
  margin-left: 5px;
}
.filter-buttons .filter-content li .child {
  font: normal normal normal 20px/34px Gibson;
  margin-left: 20px;
}
.filter-buttons #box:checked   .filter-content {
  display: block;
}
.filter-buttons #box:checked ~ .filter-checkbox::before {
  transform: rotate(180deg);
}

<div >
  <div >
      <form action="/form/submit" method="post">
        <a href="/blog/" title="All Blog Categories"><button >All Categories</button></a>
        <label for="box" ></label>
        <input type="checkbox" id="box" />
        <ul >

            <li><a href="#">some content</a></li>
         <li><a href="#">more content</a></li>
          
        </ul>
      </form>
    </div>
   </div>

CodePudding user response：

If you swap the label and input, so the label comes after the input, the checked status of the input element can have an influence on the label.

However, the problem then is that the you have (direct sibling) on the checked status of the input is not correct as the content is now not the immediate sibling.

Change it to a ~ (general sibling selector) and the list will appear.

.filter-buttons {
  margin-top: 20px;
}

@media (min-width: 768px) {
  .filter-buttons {
    margin-top: 50px;
  }
}

.filter-buttons .filter-dropbtn {
  background: #e0e1e1 0% 0% no-repeat padding-box;
  border-radius: 25px;
  color: #2130b2;
  font: normal normal normal 20px/24px Gibson;
  letter-spacing: 0;
  padding-left: 25px;
  text-align: left;
  width: 275px;
}

@media (min-width: 768px) {
  .filter-buttons .filter-dropbtn {
    width: 325px;
  }
}

.filter-buttons .filter-dropdown {
  display: inline-block;
  position: relative;
}

.filter-buttons .filter-dropdown form .filter-checkbox::before {
  background-image: url(data:image/svg xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI3LjEuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDUwIDUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MCA1MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiMyMTMwQjI7fQoJLnN0MXtmaWxsOiNGRkZGRkY7fQo8L3N0eWxlPgo8ZyBpZD0iTGF5ZXJfMiI Cgk8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIyNSIgY3k9IjI1IiByPSIyNC45Ii8 CjwvZz4KPGcgaWQ9IkxheWVyXzEiPgoJPGcgaWQ9ImFycm93X2RvdWJsZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIpIHJvdGF0ZSg5MCkiPgoJCTxwYXRoIGlkPSJQYXRoXzE1NyIgY2xhc3M9InN0MSIgZD0iTTI2LjMtN2wtMS43LTEuN2w0LjMtNC4zbC00LjMtNC4zbDEuNy0xLjdsNiw2TDI2LjMtN3oiLz4KCQk8cGF0aCBpZD0iUGF0aF8xNTgiIGNsYXNzPSJzdDEiIGQ9Ik0xOS40LTdsLTEuNy0xLjdMMjItMTNsLTQuMy00LjNsMS43LTEuN2w2LDZMMTkuNC03eiIvPgoJPC9nPgo8L2c Cjwvc3ZnPgo=);
  background-repeat: no-repeat;
  background-size: 100%;
  content: "";
  display: inline-block;
  height: 44px;
  position: absolute;
  right: 20px;
  width: 44px;
}

.filter-buttons .filter-dropdown form input {
  visibility: hidden;
}

.filter-buttons .filter-content {
  background: #f0f0f0 0% 0% no-repeat padding-box;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16078);
  display: none;
  list-style: none;
  margin-top: 0;
  padding: 0 10px 15px;
  position: absolute;
  width: 275px;
  z-index: 100;
}

@media (min-width: 768px) {
  .filter-buttons .filter-content {
    width: 325px;
  }
}

.filter-buttons .filter-content li::before {
  content: "";
  list-style: none;
}

.filter-buttons .filter-content li {
  border-bottom: 1px solid #2130b2;
  list-style: none;
}

.filter-buttons .filter-content li a[href]:not(.button) {
  color: #333;
  letter-spacing: 0;
  text-decoration: none;
}

.filter-buttons .filter-content li a[href]:not(.button):hover {
  color: #2130b2;
}

.filter-buttons .filter-content li .parent {
  font: normal normal 600 20px/34px Gibson;
  margin-left: 5px;
}

.filter-buttons .filter-content li .child {
  font: normal normal normal 20px/34px Gibson;
  margin-left: 20px;
}

.filter-buttons #box:checked~.filter-content {
  display: block;
}

.filter-buttons #box:checked~.filter-checkbox::before {
  transform: rotate(180deg);
}

<div >
  <div >
    <form action="/form/submit" method="post">
      <a href="/blog/" title="All Blog Categories"><button >All Categories</button></a>
      <input type="checkbox" id="box" />
      <label for="box" ></label>
      <ul >

        <li><a href="#">some content</a></li>
        <li><a href="#">more content</a></li>

      </ul>
    </form>
  </div>
</div>

You may want to do something about the double arrows being partially covered by the menu. Depends on your requirement.