具有自定义形状的可扩展<textarea> </textarea>

Question

如果我想创建一个具有讲话泡泡形状的文本区域，我应该怎么做 - 就像你在漫画中看到的那样 - 或者在文本输入时需要扩展的思想泡泡？

编辑：

嘿伙计们，抱歉我之前对我的问题不够清楚 - 虽然我确实得到了一些有用的答案。如果有办法给两个人“Checkmark”积分，我会因为两个人确实回答了我的模棱两可的问题。

我不反对使用JS，但有人推荐的链接实际上非常接近我所需要的，据说，第一个回复也给了我一个漂亮的想法。由于具有自定义包装器的帖子将具有最大字符长度，因此我可能只想出相同样式的三种不同尺寸并根据帖子的长度使用它们。

无论如何，感谢你们的出色表现！

Answer 1

<强> LIVE DEMO

AFAIK textarea无意分别收听内容更改和调整大小 （不是没有JS）所以这是我迄今为止最好的建议：

<span class="bubble" contenteditable="true">Type here</span>

.bubble{
  position:relative;
  display: inline-block;
  padding: 15px;
  background: #ff9;
  font-family: "Comic Sans MS", cursive, sans-serif;
  text-transform: uppercase;
  color:#000;
  border:2px solid #000;
  border-radius:20px;
  outline:0;
}
.bubble:after{
  content: ' ';
  position:absolute;
  margin: 0 auto;
  left:0;
  right:0;
  bottom:-10px;
  width:15px;
  height:15px;
  background:#ff9;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(45deg);
}

Answer 2

这是一个可以帮助您完成所要求的网站。 的 CSS Text Wrapper

Answer 3

尝试一个无边框文本区域，其背景与您需要的背景图像的背景颜色相匹配。

e.g。你有一个包裹textarea的div。 div具有圆角以形成圆形（例如宽度：100px; border-radios：50px;背景颜色：白色）。 textarea必须没有边框，并且必须具有相同的bg颜色，当然必须居中。

这只是一个提示，还有许多其他实现。