Html textarea内的样式文本

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12202844/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 02:34:45  来源:igfitidea点击:

style text inside textarea

htmlcsstextareamargin

提问by Daniel Ramirez-Escudero

I'm working in this form which its design is exactly like this:

我正在以这种形式工作,它的设计完全是这样的:

enter image description here

在此处输入图片说明

Right now I'm at this stage, so working some little details: enter image description here

现在我处于这个阶段,所以工作一些小细节: 在此处输入图片说明

As you will be able to see the "Your text..." is sticked 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.

因为您将能够看到“您的文本...”粘贴在文本区域的左上角。如果可能的话,我试图找到一种通过 CSS 来操作它的方法。我只需要对 textarea 内的文本应用一些边距/填充。如果使用 CSS 无法做到这一点,我愿意提供建议。

How to manipulate via CSS the text inside the textarea???

如何通过 CSS 操作 textarea 内的文本???

回答by undefined

You can use CSS paddingproperty:

您可以使用 CSSpadding属性:

textarea {
    padding: 5px;
}

回答by Maciej Niemir

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

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

注意:box-sizing 是 CSS3 属性。它非常有用,因为没有它 width: 100% 或其他将无法按预期工作。

回答by Hacknightly

You can use CSS to create the desired effect

您可以使用 CSS 来创建所需的效果

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

回答by Daniel Ramirez-Escudero

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

是的,应用于 textarea 的 CSS 填充是正确的。但是,随着整个 textarea 的尺寸发生变化,您需要更改“行”和“列”。

Thank you!

谢谢!

Dani

达尼

回答by Geovany

You can use the code below:

您可以使用以下代码:

line-height: _px;

put the same value of the height of the textarea.

放置与textarea高度相同的值。