ラベルと値を使用してカスタムテキストボックスを作成するにはどうすればよいですか？

Question

私はデザイナーではありませんが、私は機能を実装する作業をしています。ユーザーがグリッド内のテキストボックスに値を入力できる作業UIを開発する必要があります。これらの値を入力する際に​​は、グリッド内のテキストボックスごとに異なる値を参照する必要があります。したがって、私は値を入力している間に参照値が表示されるテキストボックスを設計する必要があります。誰も私にこの問題を解決する良い設計を提案することができます。

私が考えているのは、テキストボックスの左上の部分が編集不可能なラベルとして表示され、テキストボックスの他の領域が値を入力するように編集可能であるということです。

画像に見られるように、左上の空白値を入力するユーザのためのテキストボックスであるが、私は、参照される値を表示する場所です。

私の提案する解決策が良いのであれば、どのように実装すればよいですか？他の誰かが提案できる解決方法はありますか？

Answer 1

2つの方法があります。

1. あなたはabsolute位置に参照ラベルを使用して、左から詰め物の等しい量（参照ラベルの幅）とテキストボックスの上に置くことができます。

2. :beforeタグを使用して、テキストボックスに直接適用できます。 :beforeタグ位置absoluteとテキストボックス位置relativeを与えます。