css - 在文本区域内放置标签文本

Question

我已经在 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>

Answer 1

使用占位符属性，现在被广泛支持。

<input type="text" id="name" class="required" name="name" placeholder="Ime i prezime *" />

Answer 2

我使用 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;
}

这确实会覆盖输入框中的标签，尽管必须有一个事件连接以使颜色变暗，然后在字段中按下键值时将其删除。