0

私は数時間 CSS をいじっていますが、望む結果が得られないようです。基本的に、テキストボックス内にラベルテキストを表示したいので、入力を開始すると消えます。このようなもの [入力 --- 名前を入力 --- 入力]

実際の例: http://www.apartmani-pesa-zaton.hr/rezervacija

私のラベルフォーム:

<form class="email" id="forma-kontakt" action="send_mail.php" method="post">
        <div id="grid_kontakt">
                    <div id="grid_kontakt_l">
                        <p>
                            <label for="name">Ime i prezime *</label>
                            <input type="text" id="name" class="required" name="name" />
                        </p>
                        <p>
                            <label for="email">E-mail *</label>
                            <input type="text" id="email" class="required email" name="email" />
                        </p>
                    </div><!-- Grid kontakt left -->
                    <div id="grid_kontakt_r">
                        <p>
                            <label for="country">Država</label>
                            <input type="text" id="country" class="required" name="country" />
                        </p>
                        <p>
                            <label for="phone">Telefon</label>
                            <input type="text" id="phone" class="required" name="phone" />
                        </p>
                    </div><!-- Grid kontakt right -->
                    <p class="text">
                        <label for="message">Poruka *</label>
                        <textarea name="message" class="required" id="message"></textarea>
                    </p>
                    <p class="ar">
                        <em>Sva polja su obavezna!</em>
                        <input type="submit" class="send" value="POŠALJI" />
                    </p>
                </div><!-- Grid kontakt -->
            </form>
4

2 に答える 2

2

placeholder 属性を使用してください。現在、広くサポートされています。

<input type="text" id="name" class="required" name="name" placeholder="Ime i prezime *" />
于 2013-03-31T14:12:38.880 に答える
0

Chrome デベロッパー ツールを使用して、サンプル サイトの関連するすべての CSS をフォームに追加しました。

http://jsfiddle.net/76VRz/54/

.email input[type=text], .forma input[type=email] {
width: 283px;
height: 47px;
padding: 0 15px;
background-position: 0 0;
}

.email label {
position: absolute;
width: 100%;
height: 47px;
line-height: 47px;
color: #383838;
font-size: 14px;
text-indent: 15px;
cursor: text;
}

これは入力ボックス内のラベルをオーバーレイしますが、色を薄くするために配線されたイベントが必要であり、フィールドで値のキーが押されたらそれを削除します。

于 2013-03-31T14:32:35.143 に答える