在一个表单中,我同时具有文本输入和textarea输入,两者的格式均符合网站的图形准则。使用以下CSS,textarea字段仅在垂直居中的一行上显示文本,而不是我期望的那样。另外,文本字段的高度与textarea的高度相同,我不明白为什么。现在,我的目标是使文本字段格式完全独立于textarea。并且要让textarea使用自动换行显示多行,并且仅针对垂直显示自动调整大小。
input[type=text],
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: white;
width: 100%;
padding: 12px 12px;
margin: 8px 0;
display: inline-block;
border: 1px solid #a0a0a0;
border-radius: 5px;
box-sizing: border-box;
font-size: 16px;
font-weight: normal;
}
input[type=textarea],
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: white;
width: 100%;
padding: 12px 12px;
margin: 8px 0;
display: inline-block;
border: 1px solid #a0a0a0;
border-radius: 5px;
box-sizing: border-box;
font-size: 16px;
font-weight: normal;
height: 4em;
word-wrap: normal;
vertical-align: top;
overflow: auto;
}
textarea.vert {
resize: vertical;
}
<label for="title">Title<font class="red-evidence">*</font></label>
<input type="text" id="title" name="title" placeholder="Write your title here" required>
<label for="content">Content<font class="red-evidence">*</font></label>
<input type="textarea" id="content " name="content " placeholder="Write your content here " required>
因此,正如我所告诉的,上面的代码产生一个具有一定高度的textarea,但只有垂直居中的单行文本,没有自动换行,而我需要自动换行和至少两行,并在垂直方向自动调整大小。同样,文本字段具有相同的textarea高度,而其CSS没有指定高度。我该如何解决这些问题?
答案 0 :(得分:1)
如果要使用多行显示文本,请使用textarea元素代替输入。
<textarea id="content " name="content " rows="5" placeholder="Write your content here " required > </textarea>
您可以相应地进一步定义CSS
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: white;
width: 100%;
padding: 12px 12px;
margin: 8px 0;
display: inline-block;
border: 1px solid #a0a0a0;
border-radius: 5px;
box-sizing: border-box;
font-size: 16px;
font-weight: normal;
height: 4em;
word-wrap: normal;
vertical-align: top;
overflow: auto;
}