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调用中有了新内容..将其移出（更改了parans）并且一切正常

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;
}

希望这会有所帮助。

更改DropDownListFor样式

1 个答案: