'Style text inside a 'textarea'

I'm working in this form. Its design is exactly like this:

Enter image description here

Right now I'm at this stage, so I am working on some little details:

Enter image description here

As you will be able to see, the "Your text..." is stuck to the top left corner of the textarea. I'm trying to find a way to manipulate this via CSS if possible. I just need to apply some margin/padding to the text inside the textarea. If this is not possible with CSS I'm open for suggestions.

How can I manipulate the text inside the textarea via CSS?

htmlcsstextareamargin


Solution 1:[1]

Use:

textarea {
    padding: 5px;
    box-sizing: border-box;
}

Note: box-sizing is a CSS 3 property. It's very useful, because without it width: 100% or other will not work as you expected.

Solution 2:[2]

You can use CSS to create the desired effect

textarea {
  padding: 20px;
  margin: 10px;
}
<textarea></textarea>

Solution 3:[3]

Yes, the padding from CSS applied to textarea is correct. But then you need to change the "rows" and the "columns" as the dimensions of the whole textarea changes.

Solution 4:[4]

You can use the code below:

line-height: _px;

Use the same value as the height of the textarea.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Peter Mortensen
Solution 2 dota2pro
Solution 3 Peter Mortensen
Solution 4 Peter Mortensen

Related Questions