2011-07-07 25 views
2

このサイトを見て:http://www.gofundme.com/sign-up/彼らはあなたが$£記号を変えることができる素敵な「金額」入力を持っています。私はそれがjavascriptでそれについてどうやって行くのか、それは私に説明した(ありがとう)。どうやらそれは入力のラベルを変更します。ラベルを入力フィールドの内側に表示するにはどうすればよいですか?

私の質問は、入力フィールド内でシンボル(フィールドラベル)をどのように取得するのですか?

+1

それは入力内ではないです。それはまた入力を持っているdivの中にあります – Jawad

+0

Jawad

答えて

2

例として与えている側で取り組んでいるアプローチは、ラベルをラップして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を使用して状況にアプローチする方法は常にさまざまです。

+0

ちょっと、素早い答えをありがとう。私はあなたの2番目の提案が好きですが、私はどこに絶対的なポジションをとっているのか分かりません - 私は行って読んで見つけます:) –

+0

あなたは絶対に "RELATIVE"というラベルを付けますか?あなたはまだdivが必要になります! – Jawad

+0

これはそれぞれの文書構造によって異なります。あなたは余分なdivが必要かもしれないが、それは与えられていない。彼は周囲のフォームやフィールドセットなどに基づいてラベルを絶対に配置することもできます。 – ximi

3

これらは、テキストボックスのようにスタイルされた普通の<div>と、その内にフチなしの<input>が続く<label>です。

Firebugを使用すると、その動作を確認できます。

+0

提案に感謝します。私は実際に火薬瓶を持っていますが、少し混乱していると私は言うのは恥ずかしいです。私はちょっとnewb :( –

+0

HTMLの要素をHTMLタブで見ることができます。そして、あなたはそのスタイルを右に見ることができます。 – SLaks

1

実際には入力フィールド内にはありません。ソース(Chromeデベロッパーツールを使用した)を見ると、すべてがdivで、ラベルに通貨記号が含まれていて、実際のテキスト入力フィールドがその横にあることがわかります。

0

これは、彼らが使用しているコードです:

<div class="amt_box bg_white"> 
    <label class="currency-display">$</label> 
    <input class="big-field" type="text" 
     tabindex="1" value="" name="Funds[goalamount]"> 
</div> 

私はちょうどそれをコピーします。

3

私はあなたがこのプレースホルダの使用について話していると思う:

<input type="text" placeholder="Type here" /> 
関連する問題