ドロップダウンメニューの行幅の変更

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です。

あなたが選択した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>