CODEWITHSUNDEEP
csstextarearows
gab
gab

Reputation: 77

How to setup textarea rows and resize using html plus css?

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?

Upvotes: 0

Views: 636

Answers (1)

Imran Hussain
Imran Hussain

Reputation: 160

If you want to use multiples lines to show the text then use textarea element instead of input.

<textarea id="content " name="content " rows="5" placeholder="Write your content here " required > </textarea>

You can further define your css accordingly

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

Upvotes: 1

Related Questions