如何使用标签和值创建自定义文本框？

Question

我不是设计师，但我有一项任务来实现功能。我必须开发一个工作用户界面，用户可以在网格内的文本框中输入值。在输入这些值时，用户应该引用对于网格中的每个文本框不同的值。因此，我希望设计一个文本框，用户在输入值时可以随时查看参考值。任何人都可以建议我一个好的设计来解决这个问题。

我所想的是，具有文本框的左上角的一部分作为不可编辑的标签，自定义文本框，而文本框的另一个领域是可编辑的输入值。

，以便在图像看到的，左上角是我将显示值将被称为，而白色空间为用户输入的值的文本框。

如果提出的解决方案由我来说是一个很好的那么如何实现呢？或任何人可以建议的其他解决方案？

Answer 1

有2种方法。

1. 可以在absolute位置使用参考标签，并将其放置在文本框与从左侧等量填充的（在附图标记的宽度）。

2. 您可以使用:before标签，并直接将其应用到文本框。给:before标记位置absolute和文本框位置relative。