1、輸入框和選擇器的樣式修改：

寫在style中不能加scoped，所以可以在最外層的div加一個專屬名再寫樣式:

.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作用域內(nèi)使用>>>或/deep/修改樣式無效，要想：

官網(wǎng)如是說：加:popper-append-to-body="false"

代碼像普通樣子寫：

 <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>

  .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/穿透也是無法定位到元素的，要想做到修改樣式：


官網(wǎng)說需要加：

代碼：

<el-date-picker
  :popper-append-to-body="false"
  popper-class="datepopper"
  ...
/>

同樣不能寫在scoped里（時間選擇器和時間范圍選擇器都有啦）：

.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樹形下拉框樣式

文章來源地址http://www.zghlxwxcb.cn/news/detail-731952.html

加 :popper-append-to-body="false"

  .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;
  }

到了這里，關(guān)于【vue+elementUI】輸入框樣式、選擇器樣式、樹形選擇器和下拉框樣式修改的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！