CSS或SASS当子元素处于活动状态时如何更改:: after，:: before父元素效果的样式

Question

html

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

css，当 .styled-select 为：active 时，我应该更改 .styled-select-box :: after 的样式：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;
}

我尝试了：has（），但浏览器不支持

Answer 1

据我所知，仅凭CSS不可能做到这一点。