textarea滚动栏破坏样式：如何将滚动栏置于textarea后方？

要让滚动栏不破坏textarea的圆角外观，核心思路是用外层容器承载边框和圆角，让textarea本身无边框并撑满容器，依靠容器的overflow: hidden裁剪滚动栏超出圆角的部分。以下是修改后的完整代码：

修改后的HTML #

<div class="message-box"> 
  <div class="textarea-wrap">
    <textarea
      name="message"
      id="message"
      placeholder="enter your message"
      required
      autocapitalize="words"
      maxlength="200"
      rows="10"
      cols="30"
    ></textarea>
  </div>
</div>

修改后的CSS #

/* 全局滚动栏样式 */
::-webkit-scrollbar {
  width: 1rem;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 50px;
  /* 给滚动thumb加透明边框，避免贴紧容器边缘 */
  border: 0.2rem solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: #ccc;
}

.message-box {
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
}

/* 核心外层容器：负责边框和圆角 */
.textarea-wrap {
  border: 0.2rem solid #000;
  border-radius: 3rem;
  overflow: hidden; /* 裁剪内部滚动栏超出圆角的部分 */
  margin-bottom: 1rem;
}

.textarea-wrap textarea {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  resize: none; /* 可选：禁止用户调整textarea大小 */
  padding: 1.5rem; /* 加内边距，让内容不贴滚动栏和边框 */
  box-sizing: border-box;
  
  &::placeholder {
    text-transform: capitalize;
  }
  
  &:focus {
    outline: solid red 0.2rem;
    outline-offset: -0.2rem; /* 让focus轮廓贴合容器边框 */
  }
}

关键调整说明 #

1. 外层容器承载样式：将原本textarea的边框、圆角转移到.textarea-wrap，并设置overflow: hidden，这样内部textarea的滚动栏超出圆角的部分会被自动裁剪，不会破坏整体外观。
2. textarea无边界化：让textarea撑满容器，去掉自身边框，滚动栏成为textarea内部元素，完全被容器的圆角限制。
3. 滚动栏优化：给滚动thumb添加透明边框并设置background-clip: padding-box，避免滚动条贴紧容器边缘，视觉上更和谐。
4. focus状态适配：调整outline-offset，让focus时的红色轮廓贴合容器边框，保持样式统一。

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