Текст Css Textarea с отступом цвета фона и рамкой для каждой записи

Question

У меня есть текстовая область и вход под ней.

Это похоже на чат, в котором вы вводите что-то в поле ввода и нажимаете кнопку Отправить, а затем он переходит в текстовую область.

Теперь, чтоМне нужно сделать, это добавить div с некоторыми отступами, рамкой и цветом фона к тексту, добавленному в текстовую область.

Например. Я делаю "Привет" во входных данных .... нажмите кнопку Отправитьи он добавляется в текстовое поле, но с помощью этого CSS:

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

Как я могу это сделать?

Answer 1

Вы не можете вставить div в элемент textarea.вы можете использовать другой элемент вместо textarea, например, другой div

Answer 2

<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>