需求：开发全宽且带下划线的Textarea组件（附样式参考图）

核心实现代码 #

HTML结构

<div class="underline-textarea-wrap">
  <textarea class="underline-textarea" placeholder="请输入内容..."></textarea>
</div>

CSS样式

.underline-textarea-wrap {
  width: 100%;
  position: relative;
}

.underline-textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid #333;
  padding: 6px 0;
  font-size: 16px;
  resize: vertical;
  outline: none;
  background-color: transparent;
}

/* 可选：聚焦时下划线高亮 */
.underline-textarea:focus {
  border-bottom-color: #1a73e8;
}

关键样式说明 #

• width: 100% 确保组件占满父容器宽度，实现全宽效果
• 移除默认边框，仅保留底部边框作为下划线，贴合需求样式
• outline: none 清除浏览器默认聚焦外边框，保持视觉统一
• resize: vertical 允许用户垂直调整高度，同时限制水平方向避免破坏布局
• 可自定义下划线颜色、内边距等属性，适配不同设计风格

内容的提问来源于stack exchange，提问作者MIH10