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

Question

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

By child element (select-box) is active you mean when all options are visible or when an option is selected? — Razvan Zamfir, May 31 '20 at 19:49

score 1 · Accepted Answer · answered May 31 '20 at 19:34

1

As far as I know, this is not possible with CSS alone.

answered May 31 '20 at 19:34

bronlund

138
8

You can find some workarounds here. Its planned to have a :has pseudo class: https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector – gsa.interactive May 31 '20 at 19:37
div:has(> select) not supported by browsers – Abbos Tajimov May 31 '20 at 19:39

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

1 Answers1