javascript - 下拉菜单中改变线宽

Question

如何在下拉菜单中使用 CSS 创建不同的行高？正如您在下面看到的，我正在更改每个元素的字体大小，但是，一旦选择新字体就不会应用。谢谢!

<select>
        <option class="w1">&#9472&#9472&#9472&#9472</option>
        <option class="w2">&#9472&#9472&#9472&#9472</option>
</select>

option.w1  {
  font-size: 5px;
}
option.w2  {
  font-size:8px;  
}

https://jsfiddle.net/kwham1bf/1/

Answer 1

遗憾的是，无法使用 CSS 选择元素的父元素。在这种情况下，父级是选择，子级是选定的选项。

如果您需要根据所选的选项设置select的样式，则必须使用JavaScript:

var select = document.querySelector("select");

select.addEventListener("change", function() {
    var selected = document.querySelector("option:checked");
    var selectedFontSize = getComputedStyle(selected, null).getPropertyValue("font-size");
    select.style.fontSize = selectedFontSize;
});

option.w1  {
  font-size: 5px;
  background-repeat: repeat;
  display: inline-block;
  position: static;
  
}

option.w2  {
  font-size:8px;
  background-repeat: repeat;
  display: inline-block;
  position: static;
}

option.w3 {
  font-size: 11px;
  background-repeat: repeat;
  display: inline-block;
  position: static;
}

option.w4 {
  font-size: 14px;
  background-repeat: repeat;
  display: inline-block;
  position: static;
}

option.w5 {
  font-size: 17px;
  background-repeat: repeat;
  display: inline-block;
  position: static;
}

option.w6 {
  font-size: 20px;
  background-repeat: repeat;
  display: inline-block;
  position: static;
}

<div class="row add-top-margin">
  <div class="col-xs-3 section-label">Width</div>
  <select>
    <option class="w1">&#9472&#9472&#9472&#9472</option>
    <option class="w2">&#9472&#9472&#9472&#9472</option>
    <option class="w3">&#9472&#9472&#9472&#9472</option>
    <option class="w4">&#9472&#9472&#9472&#9472</option>
    <option class="w5">&#9472&#9472&#9472&#9472</option>
    <option class="w6">&#9472&#9472&#9472&#9472</option>
  </select> 
</div>