HTML CSS技术问题：解决输入框输入内容覆盖右侧搜索图标

问题原因 #

输入内容覆盖图标，本质是输入框没有为右侧图标预留足够空间，导致文本内容会延伸到图标所在位置，或者图标的布局层级不对，被输入文本遮挡。

方案1：图标作为输入框背景图（推荐） #

如果.searchIcon是输入框的类名，直接调整输入框内边距并优化背景图定位：

.headmenu-right {
    margin-left: auto;
    padding-right: 15px;
}

.headmenu-right>input.searchIcon {
    border-radius: 15px;
    padding-left: 5px;
    /* 给右侧图标预留空间（根据图标实际尺寸调整，示例为25px） */
    padding-right: 25px;
    background-image: url("/img/search.png");
    background-repeat: no-repeat;
    background-size: 20px 20px; /* 明确图标大小，避免拉伸变形 */
    background-position: right 5px center; /* 图标靠右，留5px间距 */
}

• 核心逻辑：用padding-right限制输入文本的范围，让内容不会跑到图标区域；同时精准控制背景图的位置和尺寸。

方案2：图标为独立元素 #

如果图标是和输入框同级的独立元素，通过定位让图标悬浮在输入框上方：

.headmenu-right {
    margin-left: auto;
    padding-right: 15px;
    position: relative; /* 作为图标的定位容器 */
}

.headmenu-right>input {
    border-radius: 15px;
    padding-left: 5px;
    padding-right: 25px; /* 预留图标空间 */
    width: 100%; /* 输入框占满容器宽度 */
}

.searchIcon {
    background-image: url("/img/search.png");
    background-repeat: no-repeat;
    background-size: 20px 20px;
    /* 绝对定位到输入框右侧 */
    position: absolute;
    right: 20px; /* 对应容器padding-right + 间距 */
    top: 50%;
    transform: translateY(-50%); /* 垂直居中 */
    width: 20px;
    height: 20px;
}

• 核心逻辑：用绝对定位把图标固定在输入框右侧的悬浮层，输入文本被padding-right限制在左侧，不会触碰图标。

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