縮進在表單字段不會消失

我有一個接觸的形式在本頁面：http://thehummingbirdplace.com/contact.html 縮進在表單字段不會消失

形式的「註釋」部分在該領域的大型縮進當你點擊它來打字。輸入時可以刪除縮進，但我無法弄清楚如何擺脫它。

下面是窗體的代碼：

<div id="contactForm"> 
    <form class="group" method="post" action="contact1.php"> 
     <label for="text1">Name: </label> 
     <input name="name" type="text" id="text1" required> 
     <label for="text2">E-Mail: </label> 
     <input name="email" type="email" id="text2" required> 
     <label for="commentsfield" class="commentbox">Comments: </label> 
     <textarea name="comments" id="commentsfield" 
     cols=30 rows=9> 
     </textarea> 
     <input type="submit" value="submit"/> 
    </form> 
</div>

下面是我用它所有的CSS：

#contactForm { 
    margin-left: auto; 
    margin-right: auto; 
    width: 520px; 
    height: 500px; 
} 
form { 
    padding-right: 15px; 
    padding-bottom: 0px; 
    padding-left: 15px; 
    position: absolute; 
    z-index: 1; 
} 
label { 
    display: block; 
    width: 270px; 
    padding-top: 15px; 
    margin-top: 0; 
    margin-bottom: 0; 
    margin-left: 15px; 
} 
label.commentbox { 
    width: 501px; 
} 
form * { 
    background: transparent; 
    behavior: url(../_assets/PIE.htc); 
} 
input { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    border: none; 
    background: none; 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
    border-radius: 0; 
    padding: 0; 
    margin: 0; 
} 
.group:before, .group:after { 
    content: "\0020"; 
    display: block; 
    height: 0; 
    overflow; hidden; 
} 
.group:after { 
    clear: both; 
} 
.group { 
    zoom: 1; 
} 
input[type=text], input[type=email] { 
    width: 270px; 
} 
textarea { 
    width: 500px; 
} 
input[type=text], input[type=email] { 
    padding: 5px; 
} 
input[type=text], input[type=email], textarea { 
    display: block; 
    border: 1px solid #EAEAEA; 
    font-size: 16px; 
    background-color: #fff; 
    color: #666; 
    box-shadow: 0px 2px 3px rgba(255,255,255,0.5); 
} 
input:focus, textarea:focus { 
} 
input[type=email] { 
    padding-right: 10px; 
} 
input[type=submit] { 
    padding: 5px; 
    background: #666; 
    color: white; 
    border: none; 
    margin-top: 15px; 
    font-size: 100%;  
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
} 
input[type=text].required { 
    padding-left: 10px; 
} 
input.required { 
    background: webkit-linear-gradient(#FFF, #DDD); 
    background: moz-linear-gradient(#FFF, #DDD); 
    background: ms-linear-gradient(#FFF, #DDD); 
    background: o-linear-gradient(#FFF, #DDD); 
    background: linear-gradient(#FFF, #DDD); 
    -pie-background: linear-gradient(#FFF, #DDD); 
} 
::-webkit-scrollbar { 
    width: 12px; 
} 
::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px; 
} 
::-webkit-scrollbar-thumb { 
    border-radius: 10px; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

我還沒有看到這種情況發生前，並沒有站出來我在形式上造成了意圖。任何幫助將不勝感激！

來源

2014-01-13 coolpup

你需要得到你textarea標籤之間擺脫白色空間

<textarea name="comments" id="commentsfield" cols=30 rows=9></textarea>

~~Buggy Demo~~

Fixed Demo

來源

2014-01-13 07:19:00

你有你的<textarea> </textarea>

替換此差距較大： -

<textarea name="comments" id="commentsfield" cols="30" rows="9">   </textarea>

有了這一個： -

<textarea name="comments" id="commentsfield" cols="30" rows="9"></textarea>

來源

2014-01-13 07:25:53 Anup

縮進在表單字段不會消失

回答

相關問題