Question

我在此页面上有一个联系表格：http://thehummingbirdplace.com/contact.html

表格＆＃34;评论＆＃34;当您单击它以键入时，该部分在该字段中有一个大缩进。输入时可以删除缩进，但我无法弄清楚如何摆脱它。

以下是表单的代码：

<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); 
}

我以前没有看到过这种情况，而且没有什么能够突显我的形式。任何帮助将不胜感激！

Answer 1

您需要摆脱textarea标记

之间的空白区域

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

~~Buggy Demo~~

Fixed Demo

Answer 2

您的<textarea> </textarea>

之间存在很大差距

替换它： -

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

有了这个： -

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

表单字段中的缩进不会消失

2 个答案: