与数字输入关联的单位

Question

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

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

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

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

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

我考虑过使用伪元素::after 但是

In case you weren’t aware, an doesn’t allow ::before or ::after pseudo elements. None of the different input types do. https://www.scottohara.me/blog/2014/06/24/pseudo-element-input.html

有没有人有好的做法轻松支持这个？ (html 或 css)

Answer 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>

与数字输入关联的单位

Units associated to number input

forms

units-of-measurement