样式是input的框，但是可以换行

 首先，我要说的是这个输入框用的textarea，而不是input，区别在于，input输入的内容是不能换行的，但textarea文本框可以，但使用textarea的问题是，参数rows设置为一行，这个文本框的高度会很低，达不到chatgpt的那个页面要求，rows设置大一点或者这个文本框的高度给高一点会有一个问题就是输入时他的光标不会在文本框的高度中间，而是在第一行，我们是没法通过其他方式让输入光标垂直居中的，因此这也不符合chatgpt页面的要求，所以这确实是个值的学习的一点！看了chatgpt页面的做法后，我悟了，下面一张图来说明chatgpt是如何做的：

————————————————
版权声明：本文为CSDN博主「馆主阿牛」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_57421630/article/details/129481145，请关注这位大佬！！！

 

.ipt{
   display:flex;
   align-items: center;
   position: absolute;
   bottom: 60px;
   margin: 0 15px;
   padding-right: 15px;
   border-radius: 15px;
   width: calc(100% - 30px);
   height: 50px;
   border: 1px solid #e7eaec;
}
.ipt textarea {
   resize: none;
   overflow-y: auto;
   border: none;
   box-shadow: none;
}
.ipt textarea:focus{
   border: none !important;
   box-shadow: none !important;
}

如图，你只要将textarea边框取消掉，然后focus伪类将边框效果也取消掉，外边再套一个div边框将textarea文本框和按钮套在里面就好了！