我目前有很多这样的输入：
<input type="number" id="milliseconds">
该输入字段用于表示以毫秒为单位的值。 然而，我确实有多个数字输入，其值以 dB 或百分比为单位。
<input type="number" id="decibel">
<input type="number" id="percentages">
我想做的是在输入字段中添加类型后缀，让用户知道输入代表什么类型的值。像这样的东西：
（此图像经过编辑以显示我想要的结果，我也隐藏了输入类型的向上和向下箭头）。
我尝试用谷歌搜索这个，但我似乎找不到任何相关信息。有谁知道这是否可能，以及如何完成这样的事情？
您可以使用包装器<div>对于每个输入元素并将该单元定位为伪元素::after与content您的相应单位。
这种方法对于绝对定位的伪元素效果很好，不会影响现有的布局。然而，这种方法的缺点是，您必须确保用户输入的长度不与文本字段一样长，否则单位将在上面显示得令人不快。对于固定的用户输入长度，它应该可以正常工作。
/* prepare wrapper element */
div {
display: inline-block;
position: relative;
}
/* position the unit to the right of the wrapper */
div::after {
position: absolute;
top: 2px;
right: .5em;
transition: all .05s ease-in-out;
}
/* move unit more to the left on hover or focus within
for arrow buttons will appear to the right of number inputs */
div:hover::after,
div:focus-within::after {
right: 1.5em;
}
/* handle Firefox (arrows always shown) */
@supports (-moz-appearance:none) {
div::after {
right: 1.5em;
}
}
/* set the unit abbreviation for each unit class */
.ms::after {
content: 'ms';
}
.db::after {
content: 'db';
}
.percent::after {
content: '%';
}<div class="ms">
<input type="number" id="milliseconds" />
</div>
<hr />
<div class="db">
<input type="number" id="decibel" />
</div>
<hr />
<div class="percent">
<input type="number" id="percentages">
</div>如果您想支持浏览器，根本不显示这些箭头，请使用@支持 or 媒体查询.