Изменить выбор фонового изображения на основе атрибута параметра

Question

Я пытаюсь написать какое-то SASS, которое изменит фоновое изображение поля выбора в зависимости от того, что выбрано, но я не уверен, возможно ли это!

Вот как я пытаюсь это сделать,Я помещаю фоновое изображение в атрибут данных в параметрах, подобных этому

<select name="language_selector" id="language-selector">
  <option value="english" data-background-image="img/england.svg">English</option>
  <option value="spanish" selected data-background-image="img/spain.svg">Spanish</option>
</select>

Затем я пытаюсь использовать SASS, чтобы установить значение поля выбора на основе выбранной опции, как это

select {
 height: 45px;
 width: 300px;
 border-radius: 4px;
 font-family:$font;
 font-weight: 400;
 -webkit-font-smoothing: antialiased;
 -webkit-appearance: none;
 -moz-appearance: none;
  appearance: none;
  padding-left: 40px;
  position:relative;
  background-repeat: no-repeat;
  background-position-x: 10px;
  background-position-y: center;
  background-size: 18px;
  option:active ~ & {
     background-image:url(attr(data-background-image));
  }
 }

Возможно ли что-то подобное?Как я могу получить значение атрибута option и применить его к блоку выбора?

Я знаю, что могу использовать для этого Javascript, но цель состоит в том, чтобы сделать это исключительно с CSS / SASS, не используя JS.

Answer 1

Вы можете использовать

select
{
    option:checked ~ &{
         background-image:url(attr(data-background-image));
   }
}

Answer 2

Я почти уверен, что вам придется использовать что-то вроде

//pseudo sass
parent if child(with id='') has attribute selected {
  background-img: '.../.../...';
}

, но выбрать родителей в зависимости от того, какие дети внутри, невозможно ... поэтому нужно использовать javascript.

 option:active ~ & {
     background-image:url(attr(data-background-image));
  }

таким образом, вы бы выбрали только сам вариант, что, вероятно, не ваша цель, верно?