改变DropDownListFor风格

Question

一直在尝试几种方法来更改DropDownListFor元素的样式。要么是我做错了什么，要么是有什么东西压倒了它。我试过在视图元素和CSS中更改它。而且不去。

查看：

<div style="width: 100%; ">
    <div style="float: left;"> @Html.DropDownListFor(model => model.FranPID, new SelectList(Model.FranchiseList, "FranchiseID", "FranBusinessName", new { @class = "selectStyle" }))</div>
</div>

CSS：

.selectStyle {
    border: 1px solid #93A9C8;
    padding: 2px;
    font-size: 1em;
    color: #444;
    width: 200px;
    border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -o-border-radius: 3px 3px 3px 3px;
}

编辑解决方案：

正确呼叫：

<div style="width: 100%; ">
    <div style="float: left;"> @Html.DropDownListFor(model => model.FranPID, new SelectList(Model.FranchiseList, "FranchiseID", "FranBusinessName"), new { @class = "selectStyle" })</div>
</div>

不幸的是我在SelectList的电话里有了新的..。把它搬出去(改变帕兰人)，一切都在起作用

Answer 1

嗯，这是一种方式.我希望其他人告诉我，如果有更好的方法，因为我需要学习更多！

认为：

    <div id="products" class="container" >
        <div class="row">
            <div class="col-lg-10 col-md-5 col-sm-4 dropdownlist">
                @Html.LabelFor(m => m.SelectedCategoryId)
                @Html.DropDownList("id", Model.CategoryItems, new { @id = "ddlCategories", onchange = "this.form.submit();" })
            </div>
        </div>
    </div>

在css中：

/* the width of the entire in div of id=product */
#products {
    width: 100%;
}
/* any item in the div of id=product with its class having dropdownlist */
#products .dropdownlist{
    font-size: 18px;
}
/* any dropdown in product id div */
#products select{
    color: blue;
}
/* specifically, any item with id of ddlCategories in the div of id=product */
#products #ddlCategories
{
    color: red;
}

希望这能有所帮助。