在单行中显示所有选择选项

Question

默认情况下，选择框中仅显示一个选定选项或默认选项，但我希望所有选定选项都显示在同一行，并且其中选定的选项必须突出显示。

以下是我的代码

.selecttodiv{
    display: inline-block;
    height: 3em;    
    -webkit-appearance: none;
    -moz-appearance: none;
}

.selecttodiv option{
    display: inline-block;
    width: 2.5em;
    height: 2.5em;
}


<select class="selecttodiv">
   <option>I</option>
   <option>II</option>
   <option>III</option>
   <option>IV</option>
   <option>V</option>
   <option>VI</option>
</select>     

以下是 jsfiddle 的链接：https://jsfiddle.net/6yg4yhyy/

我可以在单行上显示所有选项，但在选择时不能显示。

谢谢你的帮助。

Answer 1

您可以尝试使用on和 floatsize属性。在 Chrome 和 FF 上它显示正确。IE (11) 不起作用。 JSFiddleselectoption

也许最好使用一些选择插件，您可以根据需要设置其样式。