'textarea' 内的样式文本

Question

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

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

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?

Answer 1

You can use CSS padding property:

textarea {
    padding: 5px;
}

Answer 2

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.

Answer 3

You can use CSS to create the desired effect

 textarea { padding: 20px; margin: 10px; }

 <textarea></textarea>

Answer 4

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.

Answer 5

You can use the code below:

line-height: _px;

Use the same value as the height of the textarea.