如何创建带有标签和值的自定义文本框？

Question

我不是设计师，但我的任务是实现功能。我必须开发一个工作UI，用户可以在网格内的文本框中输入值。在输入这些值时，用户应该引用网格中每个文本框不同的值。因此，我想设计一个文本框，用户在输入值时会在那里看到参考值。任何人都可以建议我一个好的设计来解决这个问题。

我所想到的是，将文本框左上角部分的自定义文本框作为不可编辑的标签，而文本框的其他区域可编辑以输入值。

如图所示，左上角是我要显示的值，而白色空间是用户输入值的文本框。

如果我提出的解决方案很好，那么我该如何实施呢？还是任何人都可以建议的任何其他解决方案？

Answer 1

有两种方法。

1. 您可以使用absolute位置的参考标签，并将其放在文本框中，并在左侧显示等量的填充（参考标签的宽度）。

2. 您可以使用:before标记并将其直接应用于文本框。提供:before代码位置absolute和文本框位置relative。