如何将占位符文本附加到预填充的数字输入中？

Question

我有一个如下所示的html输入：

<input type="number" min="4" max="100" step="1" name="myInput" value="33">

我正在从上一个屏幕设置的cookie /存储中填充值。前一个屏幕要求聚会的规模。

从UX的角度来看，我不清楚此屏幕中33的含义。由于我正在填充输入，因此无法使用占位符文本。这就是为什么我想知道是否有办法以某种方式在值之后注入“人”。

我真的很喜欢没有可见表单标签的UI外观如何干净，因此，如果可能的话，我想避免添加它们。

这是我现在拥有的：

这是我要完成的工作（红色文字）：

也许它像背景图像一样“简单”，但是我想保持间距的美观和锐利。谢谢您的任何建议！

Answer 1

尝试类似的方法，也许这可以帮助您指出正确的方向：

HTML：

<label data-placeholder="people">
  <input type="number" min="4" max="100" step="1" name="myInput" value="33">
</label>

SCSS：

LABEL {
    position: relative;

    &:after {
        content: attr(data-placeholder);
        position: absolute;
        color: red;
        z-index: 1;
        top: 1em;
        right: 1em;
    }

    INPUT {
        width: 200px;
        box-sizing: border-box;
        padding-right: 5em;
    }
}