如何使用標籤和值創建自定義文本框？

Question

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

我所想的是，具有文本框的左上角的一部分作爲不可編輯的標籤，自定義文本框，而文本框的另一個領域是可編輯的輸入值。

，以便在圖像看到的，左上角是我將顯示值將被稱爲，而白色空間爲用戶輸入的值的文本框。

如果提出的解決方案由我來說是一個很好的那麼如何實現呢？或任何人可以建議的其他解決方案？

Answer 1

有2種方法。

1. 可以在absolute位置使用參考標籤，並將其放置在文本框與從左側等量填充的（在附圖標記的寬度）。

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