Question

display: block;是否可以使用下拉框option，àlaselect？

以下是我尝试做的一个示例，类似于：带有单选按钮的标签，而不是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

除非<div>上有<select>，否则您应该能够在float周围加<select>并强制它跨越整个宽度。

html / css选择选项块显示

2 个答案: