将搜索图标添加到@ Html.TextBox -z-index

Question

如何将搜索图标添加到文本类型输入框？例如，我想在输入中使用'fa fa-search'，如下所示：

下面的代码工作正常，但如果我尝试在asp.net mvc中做某事，它就不起作用。

HTML：

<div class="col-xs-6">
  <div class="right-inner-addon">
    <i class="icon-search"></i>
    <input type="search" class="form-control" placeholder="Search" />
  </div>
</div>

CSS：

.left-inner-addon {
    position: relative;
}

    .left-inner-addon input {
        padding-left: 30px;
    }

    .left-inner-addon i {
        position: absolute;
        padding: 10px 12px;
        pointer-events: none;
    }

.right-inner-addon {
    position: relative;
}

    .right-inner-addon input {
        padding-right: 30px;
    }

    .right-inner-addon i {
        position: absolute;
        right: 0px;
        padding: 10px 12px;
        pointer-events: none;
    }

asp.net mvc：

<div class="right-inner-addon">
   <i class="icon-search"></i>
    Find by name: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string, new { htmlAttributes = new { @class = "form-control", @placeholder = "Search" } })
</div>

Answer 1

如果要向控件添加属性，则无需编写new { htmlAttributes = ....。尝试：

<div class="right-inner-addon">
   <i class="icon-search"></i>
    Find by name: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string, new { @class = "form-control", @placeholder = "Search" })
</div>

更新。 以下是您的问题的正确解决方案： http://jsfiddle.net/Kpblca4/gjdu0t93/

Answer 2

这应该有效：

<div class="right-inner-addon">
   <i class="icon-search"></i>
    Find by name: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string, new { @class = "form-control", placeholder = "Search" })
</div>

请注意，只有一些属性在开头需要 @ 字符，例如class。