与数字输入相关的单位答案

【问题标题】：Units associated to number input与数字输入相关的单位
【发布时间】：2020-12-15 00:45:55
【问题描述】：

我需要管理与 html 表单中的数字输入相关的单位。

表单是从 xml 文件生成的（如果需要我可以更改）：

Voltage : <input type="number"/> V

某些布局可能会在视觉上将单元 (V) 与输入分开：我希望将它们捆绑在一起。

理想情况下，单位显示在输入内部，就像一个始终可见的占位符。

我想过使用伪元素 ::after 但是

如果您不知道，an 不允许 ::before 或 ::after 伪元素。不同的输入类型都没有。 https://www.scottohara.me/blog/2014/06/24/pseudo-element-input.html

有没有人有一个轻松支持这个的好习惯？（html或css）

【问题讨论】：

标签： forms units-of-measurement

【解决方案1】：

这应该会给你一个良好的开端：

.input-with-unit {
  white-space: nowrap;
}
.input-with-unit > input {
  width: 100%;
  padding-right: 2rem;
}
.input-with-unit > label {
  position: absolute;
  margin-left: -1rem;
  margin-top: 0.125rem;
}

<div class="input-with-unit" style="width: 12rem;">
  <input type="number" />
  <label>V</label>
</div>
<div class="input-with-unit" style="width: 9rem;">
  <input type="number" />
  <label>A</label>
</div>

【讨论】：