如何为<input type="number">输入框添加文本后缀

嘿，我来分享几个简单靠谱的方法，给你的数字输入框加上直观的单位后缀，让用户一眼就清楚输入值的类型～

方案1：纯CSS伪元素实现（无需额外HTML结构） #

这种方法不用改现有HTML，直接靠CSS就能给输入框添加上后缀，非常简洁。你只需要给每个输入框设置相对定位，然后用:after伪元素插入单位文本，再调整位置让它显示在输入框内部右侧即可。

代码示例： #

<!-- 你的原有HTML -->
<input type="number" id="milliseconds" placeholder="输入毫秒值">
<input type="number" id="decibel" placeholder="输入分贝值">
<input type="number" id="percentages" placeholder="输入百分比">

/* 给所有需要加后缀的输入框设置基础样式 */
input[type="number"][id^="milliseconds"],
input[type="number"][id^="decibel"],
input[type="number"][id^="percentages"] {
  position: relative;
  padding-right: 30px; /* 给后缀留出空间，避免输入内容被遮挡 */
}

/* 毫秒输入框后缀 */
#milliseconds:after {
  content: "ms";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #666; /* 用浅灰色区分输入内容和后缀 */
  pointer-events: none; /* 让后缀不干扰输入操作 */
}

/* 分贝输入框后缀 */
#decibel:after {
  content: "dB";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  pointer-events: none;
}

/* 百分比输入框后缀 */
#percentages:after {
  content: "%";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  pointer-events: none;
}

方案2：HTML容器包裹（兼容性更强，样式更灵活） #

如果担心某些旧浏览器对伪元素的支持问题，或者想要更灵活的样式控制，可以把输入框和单位文本放在一个模拟输入框的容器里，视觉上看起来就是一个带后缀的输入框。

代码示例： #

<!-- 毫秒输入框容器 -->
<div class="input-with-suffix">
  <input type="number" id="milliseconds" placeholder="输入毫秒值">
  <span class="suffix">ms</span>
</div>

<!-- 分贝输入框容器 -->
<div class="input-with-suffix">
  <input type="number" id="decibel" placeholder="输入分贝值">
  <span class="suffix">dB</span>
</div>

<!-- 百分比输入框容器 -->
<div class="input-with-suffix">
  <input type="number" id="percentages" placeholder="输入百分比">
  <span class="suffix">%</span>
</div>

/* 容器样式：模拟输入框外观 */
.input-with-suffix {
  position: relative;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden; /* 避免后缀超出容器 */
}

/* 输入框样式：去掉自身边框，占满容器 */
.input-with-suffix input[type="number"] {
  border: none;
  padding: 8px 30px 8px 8px; /* 右边留空间给后缀 */
  outline: none; /* 去掉默认聚焦边框，可自定义 */
}

/* 后缀文本样式 */
.input-with-suffix .suffix {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  pointer-events: none;
}

/* 聚焦时的容器样式，模拟输入框聚焦效果 */
.input-with-suffix:focus-within {
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

一些小提示： #

• 调整padding-right的值可以控制输入内容和后缀之间的距离，根据你的输入框大小灵活调整；
• pointer-events: none很重要，它能让用户点击后缀区域时依然聚焦到输入框，不会影响操作；
• 如果需要支持移动端，记得给输入框设置合适的高度和字体大小，保证后缀显示清晰。

内容的提问来源于stack exchange，提问作者R. De Caluwe