改变下拉列表的样式

本文关键字：样式 下拉列表 改变 | 更新日期: 2023-09-27 17:51:25

尝试了几种方法来改变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调用中有new ..把它移出来(改变参数)，一切都正常了

改变下拉列表的样式

嗯，这是一种方法…我希望其他人告诉我是否有更好的方法，因为我需要学习更多!

视图中的

:

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

希望这对你有帮助。

相关文章：