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

如何将搜索图标添加到文本类型输入框？例如，我想在输入中使用“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>

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

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

asp.net mvc:

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

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

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

按名称查找：@Html.TextBox（“SearchString”，ViewBag.CurrentFilter作为字符串，new{htmlAttributes=new{@class=“form control”，@placeholder=“Search”}）

如果要向控件添加属性，则无需编写

新的{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>

按名称查找：@Html.TextBox（“SearchString”，ViewBag.CurrentFilter作为字符串，新建{@class=“form control”，@placeholder=“Search”}）

更新。 以下是您的问题的正确解决方案：

这应该可以：

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

按名称查找：@Html.TextBox（“SearchString”，ViewBag.CurrentFilter作为字符串，新建{@class=“form control”，placeholder=“Search”}）

---

请注意，只有一些属性在开始时需要

@

字符，如

类
我已经用打印屏幕更新了我的问题，搜索图标显示在VS中textboxmvc项目的后面，通常有一些开箱即用的样式。签入浏览器->F12哪些样式破坏了您的设计，只需覆盖em.我看不到任何导致搜索图标显示不正确的原因，这与z-index有关吗？你可以尝试z-index。你的问题肯定是cssi用打印屏幕更新了我的问题，搜索图标显示在文本框后面。你尝试过我的解决方案吗？你有问题的答案吗？