如何让position:absolute的textarea滚动条不超出圆角范围？

针对textarea滚动条超出圆角边框的问题，这里提供两种可靠的解决方法：

方法一：父容器裁剪（推荐） #

利用父容器的overflow: hidden和border-radius裁剪超出的滚动条，同时适配absolute定位的textarea：

修改后的CSS代码：

div {
  width: 300px;
  position: relative; /* 为absolute子元素提供定位基准 */
  border-radius: 16px; /* 与textarea保持一致的圆角 */
  overflow: hidden; /* 裁剪超出容器的滚动条 */
}

textarea {
  position: absolute;
  width: 100%; /* 自适应父容器宽度 */
  height: 25px;
  border-radius: 16px;
  border: none;
  background-color: blue;
  resize: none;
  outline: none;
}

textarea::placeholder {
  vertical-align: text-top;
}

textarea::-webkit-scrollbar-thumb {
  background-color: pink;
}

textarea::-webkit-scrollbar {
  width: 4px;
}

textarea:focus {
  height: 50px;
}

HTML代码保持不变：

<div>
  <textarea>Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis. Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis.</textarea>
</div>

原理：父容器设置overflow: hidden后，会裁剪所有超出其边界的内容（包括textarea的滚动条），配合border-radius就能让滚动条被圆角包裹，不会超出。

方法二：调整textarea内边距 #

通过给textarea添加右侧内边距，让滚动条的位置被包含在圆角范围内：

修改textarea的CSS：

textarea {
  position: absolute;
  width: calc(300px - 12px); /* 减去右侧内边距宽度 */
  height: 25px;
  padding-right: 12px; /* 预留滚动条空间 */
  border-radius: 16px;
  border: none;
  background-color: blue;
  resize: none;
  outline: none;
}

原理：给textarea右侧添加足够的内边距，让滚动条的位置落在元素的内边距区域内，而border-radius会作用于整个元素区域（包括内边距），从而让滚动条被圆角包裹。

注意：方法二需要考虑不同浏览器滚动条宽度的差异，可能需要调整内边距数值，方法一的兼容性更好。

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