在下拉菜单中改变线宽答案

【问题标题】：Varying Line Width in Drop Down Menu在下拉菜单中改变线宽
【发布时间】：2018-05-23 00:18:19
【问题描述】：

如何在下拉菜单中使用 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/

【问题讨论】：

标签： javascript html css select drop-down-menu

【解决方案1】：

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

如果您需要根据选定的 option 设置 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>

【讨论】：