如何使用CSS增大textarea右下角的调整大小拖拽角

完全可以通过CSS实现该需求，根据浏览器兼容要求不同，有两类常用实现方案：

适用于仅面向国内主流WebKit内核浏览器的场景，无需引入JS即可实现。

• 核心原理：通过WebKit内核支持的::-webkit-resizer私有伪元素，直接修改原生拖拽角的尺寸
• 代码示例：

textarea {
  /* 根据需求设置拖拽方向：可选both/vertical/horizontal */
  resize: vertical;
}

/* 仅WebKit内核浏览器生效 */
textarea::-webkit-resizer {
  /* 调整宽高即可放大拖拽区域，建议最小设置为24px符合无障碍标准 */
  width: 24px;
  height: 24px;
  /* 以下为可选样式，不需要自定义外观可省略 */
  background-color: #e5e7eb;
}

适用于需要兼容Firefox等非WebKit内核浏览器的场景，可完全自定义拖拽区域的样式和尺寸。

• 实现思路：隐藏原生拖拽控件，自定义拖拽热区后通过JS监听拖拽事件动态修改文本框尺寸
• 代码示例：

1. HTML结构

<div class="textarea-container">
  <textarea id="target-textarea"></textarea>
  <div class="resize-handle" role="slider" aria-label="调整文本框大小"></div>
</div>

2. CSS样式

.textarea-container {
  position: relative;
  display: inline-block;
}

.textarea-container textarea {
  resize: none;
  min-width: 200px;
  min-height: 80px;
}

.resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  /* 自定义拖拽热区大小，可根据无障碍需求自由调整 */
  width: 28px;
  height: 28px;
  cursor: se-resize;
  /* 可选：添加拖拽角视觉标识 */
  background: linear-gradient(135deg, transparent 60%, #9ca3af 60%);
}

3. JS逻辑

const textarea = document.getElementById('target-textarea');
const resizeHandle = document.querySelector('.resize-handle');
let startX, startY, originWidth, originHeight;

resizeHandle.addEventListener('mousedown', (e) => {
  startX = e.clientX;
  startY = e.clientY;
  originWidth = parseInt(getComputedStyle(textarea).width, 10);
  originHeight = parseInt(getComputedStyle(textarea).height, 10);
  document.addEventListener('mousemove', handleResize);
  document.addEventListener('mouseup', stopResize);
});

function handleResize(e) {
  textarea.style.width = `${originWidth + (e.clientX - startX)}px`;
  textarea.style.height = `${originHeight + (e.clientY - startY)}px`;
}

function stopResize() {
  document.removeEventListener('mousemove', handleResize);
  document.removeEventListener('mouseup', stopResize);
}

• 拖拽热区尺寸建议不小于24*24px，符合WCAG无障碍标准的最小交互区域要求
• 自定义拖拽元素可添加对应的ARIA属性，方便屏幕阅读器识别功能

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