html/css select option block display

Question

有没有办法通过display: block;下拉框option，？la select？

下面是我正在尝试做的一个例子，类似的东西：带有单选按钮的标签，而不是select。

div.sheet-class-content { 
 
    display: none; 
 
    overflow: hidden; 
 
} 
 
option.sheet-Class1:checked ~ div.sheet-Class1, select option.sheet-Class2:checked ~ div.sheet-Class2 { 
 
    display: block; 
 
}

<select class="sheet-dropdown" name="attr_FirstClass"> 
 
    <option class="sheet-class-content sheet-Class1" value="None">None</option> 
 
    <option class="sheet-class-content sheet-Class2" value="Soldier">Soldier</option> 
 
</select> 
 
<div class="sheet-Class1"></div> 
 
<div class="sheet-Class2"> 
 
    <br> 
 
    <b>Rank:</b> <input class="sheet-mainstat" name="attr_SoldierRank" type="number" value="1"/> 
 
    <b>Level:</b> <input class="sheet-mainstat" name="attr_SoldierLevel" type="number" value="1"/> 
 
    <p> 
 
</div>

因此，这甚至有可能吗？我不是超级先进的，但它似乎应该工作。

Answer 1

一般来说，修改<option>元素是非常挑剔的，而且很难做到。这是因为它们是由操作系统而不是浏览器控制的。您可以让他们在一个操作系统上的一个浏览器中执行一件事，但我可以告诉您，在不同的浏览器或不同的操作系统中，它们看起来不一样。

有些东西你只是平坦不能改变。

唯一不错的解决方案是使用一个基于JS的选择框或者自己创建一个。

Answer 2

你应该能够把<select>围绕<div>，迫使它横跨整个宽度，除非你对<select>一个float。