HTML下拉列表可以设置样式吗？

Question

我正在使用带有Razor引擎的mvc4。这是我尝试过的：

<div class="editor-field">
    @Html.DropDownListFor(model => model.NewSymbol.Category.Id, new SelectList(Model.MarketCategories, "Id","Name"), new { @class = "dropdown" })
</div>

CSS是：

.dropdown {
    margin-top: 5px;
    margin-bottom: 10px;
    padding: 3px 2px;
    width: 312px; 
}

option {
    width: 312px !important;
}

不幸的是我得到的东西看起来像：

我试图将下拉列表设置为与'select'元素至少相同的宽度。如果文字扩展到312px以上，我不介意它是否更宽，但是这个狭窄的下降看起来很傻。

感谢大家的帮助。

Answer 1

使用<select> html标记，您将受到浏览器的显示和行为的支配。解决这个问题的唯一方法是制作自己的，或使用像the jQuery UI one这样的工具包下拉列表。