CSS or SASS How to change style of ::after, ::before effects of parent element when child element is active

html

   <div class="styled-select-box">
     <select class="styled-select">
       <option value="20">20</option>
       <option value="30">30</option>
     </select>
    </div>

css, I should change the style of .styled-select-box::after when .styled-select is :active or :focus

.styled-select-box::after {
  cursor: pointer;
  display: block;
  content: ' ';
  background-image: url(/custom-icons/arrow-down.svg);
  background-size: 12px 12px;
  height: 25px;
  width: 16px;
  opacity: 0.5;
  background-position-y: 6px;
  background-repeat: no-repeat;
}
.styled-select:active *parentElement* {
  transform: rotateX(180deg);
  transition: all 0.5s ease;
}

I tried with :has() but it not supported by browsers