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。