每个条目带有背景颜色填充和边框的 Css Textarea 文本答案

【问题标题】：Css Textarea text with background color padding and border per entry每个条目带有背景颜色填充和边框的 Css Textarea 文本
【发布时间】：2019-06-23 23:24:15
【问题描述】：

我在它下面有一个文本区域和一个输入。

这就像一个聊天，您在输入中输入内容并单击提交，然后它会转到文本区域。

现在，我需要为添加到 textarea 的文本添加一个带有一些填充、边框和背景颜色的 div。

例如..I tyoe 'Hello' in the input ....单击提交，它被附加到文本区域但带有这个css：

.entry {
    border: 1px solid #ccc;
    background: #333;
    color: #fff;
    margin-bottom: 10px;
}

我该怎么做？

【问题讨论】：

你试过什么？你至少有文本区域、表单等的 HTML 吗？
如果没有工作示例，您的问题会令人困惑。

标签： javascript html css

【解决方案1】：

<textarea> 是一个输入元素，你不能为每一行文本区域设置样式。你应该使用另一个<div> 而不是<textarea> 像这样，

function sendMsg(){

  var msg = $("#msg").val();
  if(msg != ""){
  
    $("#chathistory").append("<div class='entry'>"+msg+"</div>");
    $("#msg").val('');
  
  }
return false;

}

<style>
  .entry {
    border: 1px solid #ccc;
    background: #333;
    color: #fff;
    margin-bottom: 10px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chathistory">
  
</div>
<form onsubmit="return sendMsg()">
<input type="text" id="msg">
<button>Submit</button>
</form>

【讨论】：

【解决方案2】：

您不能在 textarea 元素中插入 div。您可以使用另一个 Element 而不是 textarea ，例如另一个 div

【讨论】：