如何創建帶有標簽和值的自定義文本框？

Question

我不是設計師，但我有一個實現功能的任務。 我必須開發一個工作的用戶界面，用戶可以在其中在網格內的文本框中輸入值。 輸入這些值時，用戶應參考一個值，該值對於網格中的每個文本框都不同。 因此，我想設計一個文本框，使用戶在輸入值時可以在那里看到參考值。 誰能建議我一個好的設計來解決這個問題。

我想到的是擁有一個自定義文本框，該文本框的左上部分作為不可編輯的標簽，而該文本框的其他區域可編輯以輸入值。

因此，如圖所示，左上角是我將要顯示的值的位置，而空白是供用戶輸入值的文本框。

如果我提出的解決方案是一個好的解決方案，那么我應該如何實施呢？ 或任何其他可以建議的解決方案？

Answer 1

有兩種方法。

1. 您可以在absolute位置使用參考標簽，並將其放置在文本框上，並從左側起等量的填充（參考標簽的寬度）。

2. 您可以使用:before標記，並將其直接應用於文本框。 :before標簽位置absolute和文本框位置relative :before給出:before