CSS 滚动条始终默认显示和修改placeholder的默认颜色

狂暴草鱼卷

已于 2022-10-18 17:04:37 修改

阅读量2.7k

点赞数 4

分类专栏：大前端 # css 文章标签： css javascript css3

于 2021-12-22 16:10:54 首次发布

本文链接：https://blog.csdn.net/weixin_47353884/article/details/122088405

版权

大前端同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

css

9 篇文章 0 订阅

订阅专栏

滚动条始终默认显示

写一个弹出框默认高度300px 超过出现滚动条

但是由于滚动条需要滑动的时候才显示可能会误导用户不知道还可以下拉,所以要用css默认显示滚动条的存在

原理和更改多选框的样式一样,都是先隐藏原先的再后写一个新样式

//要出现滚动条的盒子
/deep/ .el-dialog__body {
  //设置默认高度300px 
  height: 300px;
  overflow-y: scroll;
  overflow-x: hidden;
}

/deep/ .el-dialog__body::-webkit-scrollbar {
  /* 隐藏默认的滚动条 */
  -webkit-appearance: none;
}

/deep/ .el-dialog__body::-webkit-scrollbar:vertical {
  /* 设置垂直滚动条宽度 */
  width: 5px;
}

//滚动条的新样式定制
/deep/ .el-dialog__body::-webkit-scrollbar-thumb {
  border-radius: 10%;
  border: 2px solid #666;
  background-color: #666;
}

盒子有有滚动效果但是没有滚动条

先查看全局有没有去滚动条

    //去除滚动条
    // ::-webkit-scrollbar {
    //     display: none;
    // }

    // ::-webkit-scrollbar-thumb {
    //     display: none;
    // }

如何覆盖不了全局效果再覆盖一遍

.white-body-view::-webkit-scrollbar {
  width: 8px;
  height: 6px;
  opacity: 0.4;
}
.white-body-view::-webkit-scrollbar-track {
  background-color: white;
  border-radius: 8px;
  opacity: 0.4;
}
.white-body-view::-webkit-scrollbar-track-piece {
  width: 4px;
}
.white-body-view::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: gray;
  opacity: 0.4;
}

修改input的placeholder默认颜色

input:-moz-placeholder,   
textarea:-moz-placeholder {   
    color: #C0C4CC;   
}   
 
input:-ms-input-placeholder,   
textarea:-ms-input-placeholder {   
    color: #C0C4CC;   
}   
 
input::-webkit-input-placeholder,   
textarea::-webkit-input-placeholder {   
    color: #C0C4CC;   
}