无需JavaScript实现居中自适应的货币文本输入框可行吗？

完全能做到，核心靠Flex布局控制元素对齐，让货币图标和输入内容始终垂直居中，同时输入框宽度随内容自适应，整体在容器里保持居中状态。下面是具体实现方案：

实现代码 #

HTML #

<div class="currency-input-wrapper">
  <span class="currency-icon">$</span>
  <input type="text" class="currency-input" placeholder="0" inputmode="numeric">
</div>

CSS #

.currency-input-wrapper {
  /* 模拟原生输入框外观 */
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 12px;
  /* Flex布局实现内部元素居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content; /* 容器宽度随内容自动调整 */
  min-width: 100px; /* 避免内容为空时容器过窄 */
}

.currency-icon {
  margin-right: 6px;
  font-size: 16px;
  color: #333;
}

.currency-input {
  /* 去掉输入框自带样式，和容器融为一体 */
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  text-align: right; /* 输入数字靠右对齐，和货币图标搭配更自然 */
  width: auto; /* 宽度随输入内容自适应 */
  min-width: 20px;
}

/* 可选：聚焦时给容器加高亮，还原原生输入框交互感 */
.currency-input-wrapper:focus-within {
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0,123,255,.25);
}

效果说明 #

• 货币图标和输入数字始终垂直居中，整个输入区域的内容（图标+数字）在容器内水平居中
• 输入数字时，输入框宽度自动适配内容长度，容器宽度同步变化，图标位置随内容自动调整
• inputmode="numeric"可在移动端唤起数字键盘，优化输入体验
• 聚焦时容器会高亮，保持原生输入框的交互逻辑

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