如何使用 CSS 将文本后缀添加到 字段？

字段使用 CSS？ " /> 字段使用 CSS？ " />

Add a Text Suffix to

这个问题围绕着需要向输入字段附加文本后缀“number”类型来指示输入值表示的单位。虽然这无法直接使用 CSS 实现，但有一个巧妙的解决方法，使用包装元素和 ::after 伪元素。

概念：

• 将每个输入字段包装在
  元素中。
• 使用绝对位于
  内的 ::after 伪元素来显示单位后缀。
• 使用边距或填充将单位后缀放置在输入字段的右侧。
• 更改 ::after 伪元素的内容以显示所需的单位后缀，例如，“ms”代表毫秒。

实现：

<code class="css">/* Wrapper element styling */
div {
  display: inline-block;
  position: relative;
}

/* Unit suffix position */
div::after {
  position: absolute;
  right: 1em;  /* Adjust as needed */
}

/* Example unit suffixes */
.ms::after {
  content: 'ms';
}
.db::after {
  content: 'dB';
}
.percent::after {
  content: '%';
}</code>

登录后复制

<code class="html"><div class="ms">
  <input type="number" id="milliseconds" />
</div>
<br>
<div class="db">
  <input type="number" id="decibel" />
</div>
<br>
<div class="percent">
  <input type="number" id="percentages" />
</div></code>

登录后复制

好处：

• 允许清晰简洁的单位指示，而无需修改输入元素本身。
• 简单且跨浏览器兼容的解决方案。

限制：

• 确保输入值不超过文本字段的宽度，防止单位后缀重叠。