In a form I have both text input and textarea input, both formatted to meet the graphic guidelines of the site. Using the following css, the textarea field displays the text only on a single row, vertical centered, instead of how I would expect. Also, the text field get the same height of the textarea, and I don't understand why. Now my goal is to have the text field formatting to be completely independent from textarea's. And to have the textarea show multiple lines with wordwrap and an autoresize for vertical only.
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>So as I told, the above code produces a textarea with a certain height but only a vertical-centered single line of text and no word-wrap, while I need word-wrap and at least two lines and autoresize in vertical. Also, the text field takes the same height of textarea, while its css does not specify that. How can I solve these issues?
