带有css的MVC下拉列表箭头样式

在我的razor文件中，我正在构建一个表单。 表单控件需要反映我声明的razor页面的modelType，在本例中，case是模型的名称

我在页面上有一个Html helper DropDownList，用于一个名为PSCStatusID的case属性，行为：

    @Html.DropDownListFor(s => s.PSCStatusID, (SelectList)ViewBag.PSCStatusList, "<--Select One-->", new { @class = "form-control" })

那会使箭在IE中消失

像这样的：

select:after {
content: "▼";  /* Current arrow I would like to change */
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #000;
color: black;
}

显示箭头但不在选择框中的

我就是不太明白

有人对此有什么建议吗

这是我目前拥有的

请注意，我的验证是开箱即用的：

但这是我需要得到的：

如果有任何MVC/CSS大师知道如何在我的一行HTML助手verison下拉列表中实现这一点，而不是自定义方式，请让我知道

实际上这是他们交给我的密码。在上面的版本中，我将一些MVC控件替换为HTML：

<div class="form-group">
              <label for="nrsa-psc" class="col-sm-4 control-label">*NRSA PSC Status</label>
              <div class="col-sm-8">
                <div class="input-group">
                  <input type="text" class="form-control" id="nrsa-psc">
                  <div class="input-group-btn">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
                    <ul class="dropdown-menu dropdown-menu-nrsa-psc dropdown-menu-right" role="menu">
                      <li>Option 1</li>
                      <li>Option 2</li>
                      <li>Option 3</li>
                      <li>Option 4</li>
                    </ul>
                  </div><!-- /btn-group -->
                </div>
              </div>
            </div>

要使用引导进行MVC验证，请选择下拉列表的版本

并补充说:

span.caret{color: blue;}

顺便问一下：为什么在这个网站上很难让行显示为代码呢。

---

我一整天都在打四个空格，它仍然显示为常规文本。他们应该让这变得更容易——当试图成为一个好公民并发布一个答案时，这很烦人。

我在下拉列表中添加了selectpicker类：@Html.DropDownListFors=>s.PSCStatusID，SelectListViewBag.PSCStatusList，new{@class=form control selectpicker}，然后从github中引入引导选择选择器css和js。然后添加：.form-control.bootstrap-select.input-validation-error>按钮{border:1px solid f00；背景色：fee；}在：.input-validation error{border:1px solid f00；背景色：fee；}之后添加：。并添加：span.caret{color:blue；}

<div class="form-group">
              <label for="nrsa-psc" class="col-sm-4 control-label">*NRSA PSC Status</label>
              <div class="col-sm-8">
                <div class="input-group">
                  <input type="text" class="form-control" id="nrsa-psc">
                  <div class="input-group-btn">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
                    <ul class="dropdown-menu dropdown-menu-nrsa-psc dropdown-menu-right" role="menu">
                      <li>Option 1</li>
                      <li>Option 2</li>
                      <li>Option 3</li>
                      <li>Option 4</li>
                    </ul>
                  </div><!-- /btn-group -->
                </div>
              </div>
            </div>

@Html.DropDownListFor(s => s.PSCStatusID, (SelectList)ViewBag.PSCStatusList, "<--Select One-->", new { @class = "form-control selectpicker" })

.form-control.bootstrap-select.input-validation-error > button { border: 1px solid #f00; background-color: #fee; }
after:
.input-validation-error { border: 1px solid #f00; background-color: #fee; } 

span.caret{color: blue;}