根据选项属性更改选择背景图像

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

我很确定，你必须使用类似的东西

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

但不是根据里面的孩子来选择父母 可能..所以必须使用javascript。

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

像这样你只会选择选项本身可能不是你的目标吗？

Answer 2

你可以使用

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