文本区域内的位置标签文本

我一直在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>

来源

2013-03-31 FallenRider

这：http://stackoverflow.com/questions/2984311/delete-default-value-of-an-input-text-on-click/2984337可能是你在找什么。 –

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

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

来源

2013-03-31 14:12:38 Vector

我创建了一个淡出效果的演示，只使用CSS http://jsfiddle.net/kevinPHPkevin/QLxqe/ – Vector

我使用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-31 14:32:35 ojhawkins

文本区域内的位置标签文本

回答

相关问题