滚动条样式更改更改element UI 中Slider 滑块默认组件样式

最新推荐文章于 2024-04-30 10:20:51 发布

不想上班只想要钱

最新推荐文章于 2024-04-30 10:20:51 发布

阅读量970

点赞数

分类专栏：前端 css 文章标签： ui css vue.js

本文链接：https://blog.csdn.net/Aa12364567/article/details/126145123

版权

前端同时被 2 个专栏收录

145 篇文章 3 订阅

订阅专栏

css

84 篇文章 1 订阅

订阅专栏

滚动条样式更改

::-webkit-scrollbar {
  width: 5px;
  height: 1px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(7, 36, 77, 0.5);
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 2.5px rgba(20, 20, 20, 0.1);
  background-color: rgba(7, 36, 77, 0.5);
  border-radius: 5px;
}

更改element UI 中Slider 滑块默认组件样式

:deep(.el-slider__stop) {
  width: 0px;
}

.weather :deep(.el-slider__runway) {
  background-color: #00BBFF;
}

.wave :deep(.el-slider__runway) {
  background-color: transparent;
}

:deep(.el-slider__bar) {
  background-color: #00BBFF;
}

:deep(.el-slider__button) {
  border: 4px solid #167FFF;
  opacity: 0.6;
  background-color: #FFFFFF;
  /* 测试 */
  margin-left: 5px;
}

.wave :deep(.el-slider__marks-text) {
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #FFFFFF;
  font-size: 18px;
}

.weather :deep(.el-slider__marks-text) {
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #FFFFFF;
  font-size: 16px;
/* 测试 */
margin-left: 5px;
}

.weather :deep(.el-slider) {
  width: 190px;
  height: 6px;
  position: relative;
  top: -14px;
  left: 2px;
}

.wave :deep(.el-slider) {
  width: 190px;
  height: 6px;
  position: relative;
  top: -14px;
  left: 2px;
}