ChatGPT风格输入框设计：带图标多行自适应文本框

配套 CSS（重点修复图标定位与自适应高度）：

.form-group {
  position: relative;
  width: 100%;
  max-width: 500px;
}

#search-input {
  width: 100%;
  min-height: 40px;
  max-height: 160px;
  padding: 10px 42px 10px 12px; /* 右侧预留图标空间 */
  font-size: 16px;
  line-height: 1.4;
  border: 1px solid #ddd;
  border-radius: 24px;
  outline: none;
  resize: none;
  box-sizing: border-box;
  overflow-y: hidden;
  transition: height 0.2s ease;
}

/* 自动高度适配（核心） */
#search-input {
  height: auto;
}

.send-icon-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  min-width: 0;
  padding: 0;
  background: #0078D7;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.send-icon-btn md-icon {
  font-size: 18px;
  margin: 0;
}

.send-icon-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

? 关键技巧说明：

• ✅ 图标垂直居中：top: 50% + transform: translateY(-50%) 确保无论输入框多高，图标始终居中；
• ✅ 自适应高度：height: auto + min/max-height + overflow-y: hidden，配合 JS 动态调整（见下）；
• ✅ 防抖重设高度（可选增强）：在 ng-keypress 或 input 事件后调用以下逻辑，避免换行后高度未及时更新：

$scope.adjustTextareaHeight = function() {
  const el = document.getElementById('search-input');
  el.style.height = 'auto';
  el.style.height = (el.scrollHeight) + 'px';
};
// 在模板中绑定：ng-input="adjustTextareaHeight()" 或监听 $scope.$watch

⚠️ 注意事项：

• 避免对 contenteditable 元素做复杂 Flex 对齐，它本质是内联元素，行为不可预测；
• 不要给 .input-container 设置 align-items: flex-start 并期望子元素图标“跟随底部”，应主动控制图标定位；
• 若必须保留 contenteditable 方案，请将图标容器设为 position: absolute 并脱离文档流，同时确保父容器 position: relative。

最终效果：输入框随文字逐行扩展，发送图标始终悬浮于右上角、垂直居中，无跳动、无偏移，符合现代 UI 交互规范。

以上就是《ChatGPT风格输入框设计：带图标多行自适应文本框》的详细内容，更多关于的资料请关注golang学习网公众号！