【vue+elementUI】输入框样式、选择器样式、树形选择器和下拉框样式修改

输入框样式、选择器样式和下拉框样式修改

  • 1、输入框和选择器的样式修改:
  • 2、下拉弹框样式
      • [A. 选择器的下拉弹框样式修改](#A. 选择器的下拉弹框样式修改)
      • [B. 时间选择器的下拉弹框样式修改](#B. 时间选择器的下拉弹框样式修改)
      • [C. vue-treeselect树形下拉框样式](#C. vue-treeselect树形下拉框样式)

1、输入框和选择器的样式修改:

写在style中不能加scoped,所以可以在最外层的div加一个专属名再写样式:

css 复制代码
.my-dialog {
  // 输入框的背景
  .el-input .el-input__inner,
  .el-range-editor--mini.el-input__inner,
  .el-range-editor--mini .el-range-input,
  .el-select-dropdown__item,
  .el-select-dropdown__item,
  .el-picker-panel .el-date-picker,
  .vue-treeselect__menu,
  .vue-treeselect__option,
  .bonc-tree-select .vue-treeselect__single-value {
    background-color: #1d5293 !important;
    border-color: #1664b6 !important;
    color: #fff;
  }
}

2、下拉弹框样式

A. 选择器的下拉弹框样式修改

el-select下拉项的的容器是div#app之外的,所以在scoped作用域内使用>>>或/deep/修改样式无效,要想:

官网如是说:加:popper-append-to-body="false"

代码像普通样子写:

javascript 复制代码
 <el-select v-model="value" placeholder="请选择" :popper-append-to-body="false">
   <el-option
     v-for="item in options"
     :key="item.value"
     :label="item.label"
     :value="item.value">
   </el-option>
 </el-select>
css 复制代码
  .el-select-dropdown__item,
  .el-select-dropdown__item,{
    background-color: #1d5293 !important;
    border-color: #1664b6 !important;
    color: #fff;
  }
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: #203f64 !important;
  }

B. 时间选择器的下拉弹框样式修改

el-date-picker是将元素直接挂载到页面的中,而非自身元素下,所以使用/deep/穿透也是无法定位到元素的,要想做到修改样式:

官网说需要加:

代码:

java 复制代码
<el-date-picker
  :popper-append-to-body="false"
  popper-class="datepopper"
  ...
/>

同样不能写在scoped里(时间选择器和时间范围选择器都有啦):

css 复制代码
.datepopper {
  background: #1d5293 !important;
  border-color: #1764b6 !important;
  .el-date-picker__header-label,
  .el-year-table td .cell,
  .el-date-range-picker__content .el-date-range-picker__header div,
  .el-date-table th,
  .el-date-table td span {
    color: #fff !important;
  }
  .el-date-table td.today span {
    color: #1890ff !important;
  }
  .el-date-table td.in-range div {
    background-color: #1d3b69 !important;
  }
}

C. vue-treeselect树形下拉框样式

css 复制代码
加 :popper-append-to-body="false"
css 复制代码
  .vue-treeselect__option.hover,
  .vue-treeselect__option:hover {
    background-color: #203f64 !important;
  }
  .vue-treeselect__menu-container {
    background: #1d5293 !important;
    border-color: #1764b6 !important;
    color: #fff;
  }
相关推荐
全栈软件开发10 小时前
uniapp三端影视源码苹果cms自动采集电影视频网站源码前端源码带VIP
前端·uni-app·影视源码
chxii10 小时前
10.4FormData :前端文件上传与表单数据处理的核心工具
前端
AntBlack11 小时前
不当韭菜 : 好像真有点效果 ,想藏起来自己用了
前端·后端·python
楊无好11 小时前
react中props的使用
前端·react.js·前端框架
一个处女座的程序猿O(∩_∩)O11 小时前
Vue-Loader 深度解析:原理、使用与最佳实践
前端·javascript·vue.js
一点一木11 小时前
火山方舟 Responses API 实战指南:从概念到「公司尽调 Dossier 生成器」
前端·人工智能·api
还是大剑师兰特11 小时前
TypeScript 面试题及详细答案 100题 (91-100)-- 工程实践与框架集成
前端·javascript·typescript·1024程序员节
用户479492835691511 小时前
typeof null === 'object':JavaScript 最古老的 bug 为何 30 年无法修复?
前端·javascript·面试
__WanG12 小时前
如何编写标准StatefulWidget页面
前端·flutter
非凡ghost12 小时前
By Click Downloader(下载各种在线视频) 多语便携版
前端·javascript·后端