Pseudo classes/selectors cancel eachother out, how do I fix it?

I'm trying to get a image to change color when I selected a checkbox but it cancels out the other classes I have linked to the same checkbox (classes that lock div sizes). The website is spread out through a few pages so I won't be able to upload the html code here but I can show you the website: sw-guild.com (the image I'm talking about is the arrow on all other pages but 'Home')

for some reason i'ts only '.top-list' that gets cancelled out

here is the CSS:

    input.check:checked + .top-list {       
        height: 35px;
    }

    input.check:checked ~ .middle-list {        
        height: 35px;
    }

    input.check:checked ~ .bottom-list {        
        height: 35px;
    }

    .arrow {
        filter: brightness(200%) hue-rotate(150deg);
    }

    input.check:checked + .arrow  {
        filter: hue-rotate(0deg) ;
    }