如何为<span>和<input>设置box-shadow使其呈现为单个元素？

直接上可行的实现方式，核心是把内阴影仅作用于外部容器，通过统一内部元素样式避免阴影叠加问题：

HTML结构 #

<div class="money-input-container">
  <span class="currency-sign">$</span>
  <input type="number" class="amount-input" placeholder="0.00">
</div>

CSS样式 #

/* 外层容器：承载整体内阴影与边框，作为视觉统一载体 */
.money-input-container {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px #ddd;
  overflow: hidden; /* 避免内部元素超出容器边框 */
}

/* 货币前缀：消除独立样式，与输入框对齐 */
.currency-sign {
  padding: 8px 6px 8px 12px;
  color: #555;
  font-size: 16px;
  position: relative;
  z-index: 1; /* 防止被输入框覆盖 */
}

/* 金额输入框：去掉自身边框与阴影，融入容器 */
.amount-input {
  border: none;
  outline: none;
  box-shadow: none; /* 关键：移除输入框自身内阴影 */
  padding: 8px 12px 8px 6px;
  flex: 1;
  font-size: 16px;
  background: transparent; /* 保持与容器背景一致 */
}

/* 聚焦状态：给容器加高亮，维持整体交互统一性 */
.money-input-container:focus-within {
  border-color: #2196F3;
  box-shadow: inset 0 1px 3px #ddd, 0 0 0 2px rgba(33, 150, 243, 0.2);
}

可选JS金额格式优化 #

如果需要限制输入为合法金额（最多两位小数、仅允许数字与小数点），可添加以下脚本：

const amountInput = document.querySelector('.amount-input');

amountInput.addEventListener('input', () => {
  let val = amountInput.value.replace(/[^0-9.]/g, '');
  // 确保仅存在一个小数点
  if (val.split('.').length > 2) {
    val = val.slice(0, val.lastIndexOf('.'));
  }
  // 限制小数点后最多两位
  if (val.includes('.')) {
    val = val.substring(0, val.indexOf('.') + 3);
  }
  amountInput.value = val;
});

问题解决原理 #

之前的阴影冲突源于给<span>和<input>分别添加内阴影，两个元素衔接处的阴影叠加形成垂直线条。现在将内阴影仅作用于外层容器，内部元素完全移除独立边框与阴影，视觉上完全融合为一个整体输入框，自然消除了衔接处的阴影残留。focus-within伪类则保证了输入框聚焦时，整个容器的交互反馈统一。

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