.NET Core Razor Page登录表单：如何在输入框内部放置图标

你之前遇到图标显示在输入框外部的问题，核心原因是input是HTML空元素，本身不支持嵌套任何子内容，把<i>标签写在<input>标签内部的写法完全不符合HTML规范，浏览器解析页面时会自动把嵌套的图标元素移到input外部，自然就出现了位置错位的问题。

具体实现逻辑 #

1. 不要把图标元素塞到input标签内部，给每个输入框的外层form-group容器加相对定位属性，作为图标定位的参照基准
2. 将图标放在和input同级的位置，用绝对定位把图标锚定在输入框内部的对应位置
3. 给input加对应方向的内边距，预留出图标的占位空间，避免用户输入的文字被图标遮挡

可直接复用的改造后代码 #

邮箱输入框部分：

<div class="form-group position-relative">
    <label asp-for="Input.Email"></label>
    <input asp-for="Input.Email" class="form-control u-input-width pl-5">
    <i class="fa fa-user position-absolute" style="left: 15px; top: 62px;"></i>
    <span asp-validation-for="Input.Email" class="text-danger"></span>
</div>

密码输入框部分：

<div class="form-group position-relative">
    <label asp-for="Input.Password"></label>
    <input asp-for="Input.Password" class="form-control u-input-width pl-5">
    <i class="fa fa-lock position-absolute" style="left: 15px; top: 62px;"></i>
    <span asp-validation-for="Input.Password" class="text-danger"></span>
</div>

实操注意事项 #

• 上述代码用到的position-relative、position-absolute、pl-5都是.NET Core Razor Page默认模板自带的Bootstrap内置工具类，不需要额外编写自定义CSS，复制过去就能直接生效
• 定位的top值可以根据页面实际的label行高、输入框高度微调，调整到图标和输入框垂直中心对齐即可
• 如果需要把图标放到输入框右侧（比如密码的显示/隐藏切换按钮），只需要把定位的left:15px替换为right:15px，同时把input的pl-5（左内边距）换成pr-5（右内边距）即可
• 整个改造过程完全保留了Razor Page的标签帮助属性，原有的模型绑定、客户端/服务端校验逻辑不会受到任何影响

内容的提问来源于stack exchange，提问作者gameloverr2