element ui textarea文本域显示滚动条

最新推荐文章于 2025-06-18 13:54:19 发布

爱养猫的木子

最新推荐文章于 2025-06-18 13:54:19 发布

阅读量3k

点赞数 3

CC 4.0 BY-SA版权

文章标签： ui vue.js 前端

本文链接：https://blog.youkuaiyun.com/Quiet_123/article/details/128419538

博客记录了一个关于前端开发的小bug修复过程。在textarea输入框中，原本鼠标悬停时才显示滚动条，修复后改为内容超长即显示，提升了用户交互体验。通过调整CSS样式，定制了滚动条的宽度、颜色和背景色，使得滚动条更加美观且易于使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

测试报的一个小bug，在这做个记录

效果图：

加之前：鼠标放上去才会显示

加之后：超过直接显示出来

代码：

 <el-input
    type="textarea"
    v-model="ruleForm.explain"
    :autosize="{ minRows: 2, maxRows: 8 }"
    maxlength="1024"
    placeholder="说明"
 ></el-input>

::-webkit-scrollbar {
  width: 8px; /*滚动条宽度*/
  height: 8px; /*滚动条高度*/
}
.el-textarea__inner::-webkit-scrollbar-thumb {
  background-color: rgba(168, 168, 168,.4);/*滚动条默认显示的颜色*/
}

.el-textarea__inner::-webkit-scrollbar {   
   width: 8px;   
   height: 8px;
   background-color: white;/*滚动条背景色显示的颜色*/
 }