文本區域內的位置標籤文本

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

文本區域內的位置標籤文本

回答

相關問題