如何将密码可见性图标放置在password输入框内部

方法1：自定义定位实现（兼容性最优） #

核心逻辑是通过父容器相对定位做参照物，给图标设置绝对定位固定在输入框内部右侧，同时给输入框增加右侧内边距，避免输入的内容和图标重叠。

完整修改代码 #

<div class="login-password">
    <label for="password" class="form-label">Enter your password</label>
    <!-- 新增padding-right预留图标位置 -->
    <input id="loginPassword" type="password" class="form-control" placeholder="Enter your password" style="padding-right: 40px;" />
    <i class="bi bi-eye-slash" id="togglePassword" style="cursor: pointer;" ></i>
</div>

新增对应CSS样式：

/* 父容器设置相对定位作为定位参照 */
.login-password {
    position: relative;
}
/* 图标设置绝对定位固定位置 */
#togglePassword {
    position: absolute;
    right: 10px;
    /* 数值可根据输入框高度微调，保证垂直居中 */
    top: calc(50% + 12px);
    z-index: 10;
}

方法2：使用Bootstrap内置输入组（更符合框架规范） #

如果你使用的是Bootstrap 5及以上版本，可以直接用内置的input-group组件实现，无需大量自定义样式：

<div class="login-password">
    <label for="password" class="form-label">Enter your password</label>
    <div class="input-group">
        <input id="loginPassword" type="password" class="form-control" placeholder="Enter your password" />
        <span class="input-group-text" style="cursor: pointer;background: #fff;border-left: 0;">
            <i class="bi bi-eye-slash" id="togglePassword"></i>
        </span>
    </div>
</div>

该方案会自动处理输入框和图标的拼接，视觉上呈现图标在输入框内部的效果，还可以通过修改input-group-text的边框、背景样式和输入框融为一体。

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