下拉菜单中的线宽变化

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，子级是选定的option。

如果您需要根据所选的select设置option的样式，则必须使用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>