如何在React文本输入框内垂直居中自定义图标

问题背景 #

我是StackOverflow新用户，常借助它解决问题，这是首次提问。我使用React开发，无法修改图标的调用方式，希望将label内的图标垂直居中于input组件上。目前为实现label与input堆叠设置了flex布局，但通过绝对定位的图标会相对于整个label块居中，而非仅针对input。尝试用div包裹相关元素但不符合W3C规范，不想硬写input高度（因属于设计系统需适配多场景、保持响应式），input search的图标无法自定义故不采用。现寻求简洁合规的解决方案。

原始代码 #

<label class="input-label">
nom
    <input type="text" class="input input-text input-with-icon" name="nom" placeholder="exemple" value=""/>
    <span class="input-icon input-icon--right" tabindex="0">
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="ad76e940dfa45c8f1e8d7675f49d95e7"><path id="c2de19005ef6cc9c6fd13489277b23b8" fill-rule="evenodd" clip-rule="evenodd" d="[a very long code I won't put here]" fill="#4C4F5C"></path></g></svg>
    </span>
</label>

合规CSS解决方案 #

无需修改HTML结构，通过Grid布局让input和图标共享同一行空间，实现图标相对于input垂直居中：

/* 让label成为Grid容器，实现label文本与输入区域堆叠 */
.input-label {
  display: grid;
  grid-template-rows: auto 1fr; /* 第一行放label文本，第二行放input和图标 */
  gap: 4px; /* 可选：调整文本与input的间距 */
}

/* 让input占据Grid第二行 */
.input {
  grid-row: 2;
  grid-column: 1;
  padding-right: 24px; /* 留出图标空间，根据图标大小调整 */
}

/* 让图标与input重叠在同一Grid单元格，自动垂直居中+水平靠右 */
.input-icon--right {
  grid-row: 2;
  grid-column: 1;
  align-self: center; /* 垂直居中于input */
  justify-self: end; /* 水平靠右 */
  margin-right: 8px; /* 可选：调整图标与input边缘的间距 */
  pointer-events: auto; /* 确保图标可交互 */
}

方案说明 #

• 完全符合W3C规范：无需额外包裹元素，利用原生Grid布局实现元素重叠
• 响应式适配：不硬写input高度，Grid会自动适配input的行高/内边距变化
• 不修改HTML结构：满足无法调整图标调用方式的限制
• 保持交互性：图标仍可正常点击/聚焦

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