このサイトを見て:http://www.gofundme.com/sign-up/彼らはあなたが$£記号を変えることができる素敵な「金額」入力を持っています。私はそれがjavascriptでそれについてどうやって行くのか、それは私に説明した(ありがとう)。どうやらそれは入力のラベルを変更します。ラベルを入力フィールドの内側に表示するにはどうすればよいですか?
私の質問は、入力フィールド内でシンボル(フィールドラベル)をどのように取得するのですか?
このサイトを見て:http://www.gofundme.com/sign-up/彼らはあなたが$£記号を変えることができる素敵な「金額」入力を持っています。私はそれがjavascriptでそれについてどうやって行くのか、それは私に説明した(ありがとう)。どうやらそれは入力のラベルを変更します。ラベルを入力フィールドの内側に表示するにはどうすればよいですか?
私の質問は、入力フィールド内でシンボル(フィールドラベル)をどのように取得するのですか?
例として与えている側で取り組んでいるアプローチは、ラベルをラップしてdiv内に入力し、入力フィールドであるかのようにdivにスタイルを設定することです。ラベルと入力フィールドは、そのdiv内で互いに隣り合っています。
また、絶対にラベルを配置し、入力フィールドに余白を追加することもできます。このように、偽のdivは不要です。
私は2番目のオプションの例をあげる:もちろん
HTML:
<form>
<div class="holder">
<label>
<img src="yourimagesrc" width="20" height="20" alt="Your Image" />
</label>
<input type="text" ... />
</div>
</form>
CSS:
.holder {
position: relative;
}
.holder label {
position: absolute;
left: 2px;
top: 2px;
width: 20px;
height: 20px;
}
.holder input {
padding: 2px 2px 2px 25px;
}
ピクセル値は一例のためであり、与えられた状況のための適切な値に置き換える必要があります。また、ラベル内にimgを追加する代わりに、ラベルに直接背景画像を割り当てることもできます。
cssを使用して状況にアプローチする方法は常にさまざまです。
実際には入力フィールド内にはありません。ソース(Chromeデベロッパーツールを使用した)を見ると、すべてがdivで、ラベルに通貨記号が含まれていて、実際のテキスト入力フィールドがその横にあることがわかります。
これは、彼らが使用しているコードです:
<div class="amt_box bg_white">
<label class="currency-display">$</label>
<input class="big-field" type="text"
tabindex="1" value="" name="Funds[goalamount]">
</div>
私はちょうどそれをコピーします。
私はあなたがこのプレースホルダの使用について話していると思う:
<input type="text" placeholder="Type here" />
それは入力内ではないです。それはまた入力を持っているdivの中にあります – Jawad