HTML输入框内嵌左侧图标无法显示，求问题排查与实现方案

云原生阿岚

2026-7-5

输入框内图标不显示的排查与修复方案

一、先解决图标显示的基础适配问题

输入框默认高度可能不足以容纳图标，导致图标被裁切或完全隐藏。可以通过以下CSS调整：

.login {
    border-radius: 10px;
    border: none;
    width: 30%;
    display: block;
    text-indent: 3rem;
    /* 新增固定高度，确保图标有足够显示空间 */
    height: 2.5rem;
    /* 避免内边距撑大输入框 */
    box-sizing: border-box;
}

#username {
    background-image: url(../wwwroot/images/login-user.png);
    background-repeat: no-repeat;
    /* 改成垂直居中，让图标位置更合理 */
    background-position: 2px center;
    /* 强制控制图标尺寸，防止超出输入框 */
    background-size: 1.2rem 1.2rem;
}

二、再次验证相对路径的基准

即使你确认路径正确，也要核对CSS文件的位置：

如果你的CSS文件放在css/目录下，../wwwroot/images/的含义是从css文件夹退到上一级目录，再进入wwwroot/images。如果实际文件结构不符，就会找不到图片。
可以临时改用绝对路径测试（比如/wwwroot/images/login-user.png，从网站根目录开始），快速排除路径问题。

三、优化占位符与图标的排版

用padding-left替代text-indent，兼容性更稳定，也能更精准控制占位符与图标的间距：

.login {
    border-radius: 10px;
    border: none;
    width: 30%;
    display: block;
    /* 用padding-left替代text-indent，避免特殊场景下的排版异常 */
    padding-left: 2rem;
    height: 2.5rem;
    box-sizing: border-box;
}

#username {
    background-image: url(../wwwroot/images/login-user.png);
    background-repeat: no-repeat;
    /* 调整水平位置，让图标紧贴左边界但不贴死 */
    background-position: 0.5rem center;
    background-size: 1rem 1rem;
}