Question

在我的剃刀文件中，我正在构建一个表单。表单控件需要反映我声明的剃刀页面的modelType，在这种情况下，＆＃34; Case＆＃34;是模型的名称。

我在页面上有一个名为PSCStatusID的案例属性的Html帮助程序DropDownList：

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

这对我来说非常有效，当然还有从我的POCO属性中获得的验证。

注意我正在使用Bootstrap css样式。实际上是创意部门。将HTML传递给我，我正试图准确地说明。

但是我们上面的单行HTML帮助程序的版本如下：

<div class="input-group">
                            @Html.TextBoxFor(c => c.PSCStatusID, null, new { @class = "form-control" })
                            <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">
                                    @foreach (PSCStatus item in ViewBag.PSCStatusList)
                                    {
                                        <li>

                                            <a href="#" onclick="document.getElementById('PSCStatusID').value = this.text;">
                                                @item.StatusCode - @item.StatusTextDesc
                                            </a>
                                        </li>
                                    }
                                </ul>
                            </div>
                        </div>

所以我知道这是HTML用户显示自定义下拉列表的常用方法，并使该按钮模仿DropDown Arrow一些引导类，如class =＆＃34; btn btn-primary＆＃34;。 / p>

但这真的搞砸了我。它与MVC无法很好地协作。如果我现在命名模拟下拉选择文本PSCStatusID的文本框，它包含实际文本而不是id。列表项不喜欢选择包含文本和值的选项。

我必须通过大量的箍来完成这项工作。

我真正需要做的就是将下拉箭头从默认值更改为我自己的按钮，看下拉。

我遇到了很多css，如：

select::ms-expand {display: none;}

这会使箭头在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;
}

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

我真的无法得到它。

有没有人对如何做到这一点有任何建议？

以下是我目前 enter image description here

的内容

请注意我的验证工作开箱即用：）

但这是我需要得到的： enter image description here

如果有任何MVC / CSS专家知道如何在我的单线程HTML Helper verison下拉而不是自定义方式让我知道。

实际上这是他们交给我的代码。我上面的版本是我换掉HTML的一些MVC控件的地方：

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

所以更近了一点：

我将selectpicker类添加到下拉列表中：

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

然后从github带来了bootstrap select picker css和js。

然后补充说：

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

使用下拉列表的bootstrap select版本来进行MVC验证。

并补充道：

span.caret{color: blue;}

顺便说一下：为什么要让这些代码显示在这个网站上是如此困难。我整天打了四个空间，它仍然显示为常规文本。他们应该让这更容易 - 当想成为一个好公民并发布答案时非常讨厌。

MVC DropDownList带有CSS的箭头样式

0 个答案: