Textarea change cursor position when writing

February 21, 2022

I have a textarea and when I click to add some text it starts from the top left corner of the textarea and it seems ugly. Can I change the position where the cursor starts ?

<TextArea
  placeholder=' Type your comment here...' 
  value={comment}
  onChange={e => setComment(e.target.value)}
>
</TextArea>

I was able to change the position of placeholder the way below but not the cursor

::placeholder {
  color: #C8C8C8;
  position: absolute;
  left: 15px;
  top: 15px;
}

>Solution :

You can use CSS to style a <textarea>. You can change the alignment of the text…

textarea {
  display: block;
  width: 100%;
  text-align: center;
}

<!--
borrowed from 
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
-->

<label for="story">Tell us your story:</label>

<textarea id="story" name="story"
          rows="5" cols="33">
It was a dark and stormy night...
</textarea>

Or add padding to the element:

textarea {
  display: block;
  width: 100%;
  padding: 15px;
}

<!--
borrowed from 
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
-->

<label for="story">Tell us your story:</label>

<textarea id="story" name="story"
          rows="5" cols="33">
It was a dark and stormy night...
</textarea>