Element UI 自定义/修改下拉弹窗的样式（如级联选择器的下拉弹窗样式）

最新推荐文章于 2024-05-10 22:14:07 发布

余道各努力，千里自同风

最新推荐文章于 2024-05-10 22:14:07 发布

阅读量1.2k

点赞数 8

文章标签： ui vue.js javascript

本文链接：https://blog.csdn.net/m0_70547044/article/details/135250416

版权

 <div class="aafs" style="padding-left: 20px">
      <el-cascader
        popper-class="ssaassd"
        :show-all-levels="false"
        class="cascaderInput"
        :options="options1"
        :props="props1"
        clearable
        @change="change"
        v-model="areaCodeValue"
      />
    </div>

样式不要加scoped！！！！！！

<style lang="scss">
.ssaassd {
  .el-cascader-panel {
    background-color: #103d69 !important;
    color: #4388c1 !important;
  }
  .el-cascader-node:not(.is-disabled):focus,
  .el-cascader-node:not(.is-disabled):hover {
    color: var(--el-cascader-menu-selected-text-color) !important;
  }
  .el-cascader-menu__list {
    li {
      color: #4388c1 !important;
    }
  }
  .el-cascader-node:not(.is-disabled):focus,
  .el-cascader-node:not(.is-disabled):hover {
    background-color: #9badbf !important;
  }
}
</style>