首页 > 其他分享 >在vue3中使用elementPlus的el-select时样式穿透问题

在vue3中使用elementPlus的el-select时样式穿透问题

时间:2023-05-07 14:05:28浏览次数:38  
标签:__ el elementPlus color rgba vue3 border select

下拉框的option样式只能在全局样式里改,千万不能用scope,否则不生效

<el-select 
    class="select" 
    :popper-append-to-body="false" 
    v-model="selectValue" 
    placeholder="请选择"
     popper-class="select-option">
      <el-option 
        v-for="item in options" 
        :key="item.value" 
        :label="item.label" 
        :value="item.value">
      </el-option>
</el-select>


<style lang="scss">
    .select-option{
      background-color: rgba(37, 37, 41, 0);
      border-radius: 0;
      border: 1px solid rgba(50, 50, 59, 1);
    }
    .el-select-dropdown__item.selected {
      font-size: 14px;
      font-weight: 400;
      background-color: rgba(22, 22, 27, 1);
      color: #eea635 !important;
    }
    .el-select-dropdown__item.active{
      background-color: rgba(37, 37, 41, 1);
    }

    /* 消除小三角 */
    .el-popper[x-placement^=bottom] .popper__arrow{
      border: none;
    }
    .el-popper[x-placement^=bottom] .popper__arrow::after{
      border: none;
    }
    .el-popper[x-placement^=bottom]{
      margin-top: 0;
    }

</style>
    .select{
      width: 110px;
      height: 22px;
      background-color: rgba(0,0,0,0);
    }


              <el-select
                class="select"
                :popper-append-to-body="false"
                v-model="selectValue"
                placeholder="请选择"
                popper-class="select-option"
               >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>


/deep/ .el-input__inner{
  background-color: rgba(0,0,0,0);
  border-radius: 0px;
  border: 1px solid rgba(22, 22, 27, 1);
  height: auto;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.65);
}
/deep/ .el-input__icon{
  line-height: 22px;
}
/deep/ .el-select .el-input.is-focus .el-input__inner{
  border-color: rgba(238, 166, 53, 1);
}
/deep/ .el-select .el-input__inner:focus{
  border-color: rgba(238, 166, 53, 1);
}、
/deep/ .el-select .el-input.is-focus .el-input__inner{
  border-color: rgba(238, 166, 53, 1);
}
/deep/ .el-select .el-input__inner:focus{
  border-color: rgba(238, 166, 53, 1);
}

改完之后样式如图:

在vue3中使用elementPlus的el-select时样式穿透问题_vue3


基本上所有样式都改了,如果是大佬建议直接自己写个封起来。

标签:__,el,elementPlus,color,rgba,vue3,border,select
From: https://blog.51cto.com/u_15939684/6251898

相关文章

  • 【WPF】-MVVM-封装窗口管理器解耦在ViewModel中弹出窗口
    一.在ViewModel层直接调用View弹出窗体如下图所示,这样做就发生了在ViewModel层直接使用了View,两者产生了耦合,ViewModel里是不应该包含View的,这不是我们期望的。 二.封装窗口管理器解耦在ViewModel中调用View2.1.封装窗口管理器延迟了对象的创建,先把类型(对象的模板)注册进来,......
  • Linux驱动开发笔记(一):helloworld驱动源码编写、makefile编写以及驱动编译基本流程
    前言  基于linux的驱动开发学习笔记,本篇是描述了一个字符驱动的基础开发流程,以便做嵌入式开发多年的应用或者系统学习驱动开发。 笔者自身情况  笔者拥有硬件基础,单片机软硬基础,linux系统基础等各种,就是没有linux驱动框架基础,未做过linux系统移植和驱动移植开发了......
  • python3 xml.etree.ElementTree.ElementTree
    1、介绍对应整个xml结构。2、初始化classElementTree:def__init__(self,element=None,file=None):self._root=element#firstnodeiffile:self.parse(file)element,ElementTree.Element类型,即设置一个节点对象作为根节点file,str......
  • 关于Kubernetes-v1.23.6-初始化时报错[kubelet-check] It seems like the kubelet isn
    笔者今天在对k8s,v1.23.6版本的的master节点使用如下命令进行初始化时[root@k8s-masterqq-5201351]#kubeadminit\>--apiserver-advertise-address192.18.106.87\>--image-repositoryregistry.aliyuncs.com/google_containers\>--kubernetes-versionv1.23.6\>--......
  • Vite-WeGPT聊天AI实例|vue3+pinia仿ChatGPT聊天界面
    基于vue3.x+vite4+pinia2仿chatgpt聊天模拟实例Vue3-WeGPT。基于Vite4.x+Vue3+Pinia2+VEPlus+Vue3-Markdown等技术实现仿ChatGPT聊天AI界面实例。整体界面简洁清新、支持2种界面布局、暗黑+亮色模式、全屏+半屏展示、Markdown语法解析、侧边栏收缩等功能。使用技术编辑器:cur......
  • 此平台不支持虚拟化的 Intel VT-x/EPT。 不使用虚拟化的 Intel VT-x/EPT,是否继续?
     001、虚拟机开启报错 002、解决方法a、 b、 c、 d、执行如下命令:bcdedit/sethypervisorlaunchtypeoff e、重启计算机 ......
  • Shotwell 0.32.0图像浏览器发布
    Shotwell0.32.0开源图像查看器今天发布了一个重要的更新,承诺支持更多的图像格式,以及一堆你可能已经错过的新功能和改进。Shotwell0.32.0在这里引入了对新图像格式的支持,包括AVIF、WebP、JPEG-XL、CR3,以及HEIF/HVEC的更多变体。它还引入了在图像中手动标记人物的能力,而且......
  • Shotwell 0.32.0图像浏览器发布
    Shotwell0.32.0开源图像查看器今天发布了一个重要的更新,承诺支持更多的图像格式,以及一堆你可能已经错过的新功能和改进。Shotwell0.32.0在这里引入了对新图像格式的支持,包括AVIF、WebP、JPEG-XL、CR3,以及HEIF/HVEC的更多变体。它还引入了在图像中手动标记人物的能力,而且......
  • Shotwell 0.32.0图像浏览器发布
    Shotwell0.32.0开源图像查看器今天发布了一个重要的更新,承诺支持更多的图像格式,以及一堆你可能已经错过的新功能和改进。Shotwell0.32.0在这里引入了对新图像格式的支持,包括AVIF、WebP、JPEG-XL、CR3,以及HEIF/HVEC的更多变体。它还引入了在图像中手动标记人物的能力,而且......
  • vue3源码-三、ref和toRefs的实现
    实现Refref的本质就是通过类属性访问器来实现,可以将一个普通值类型进行包装import{hasChanged,isObject}from"@vue/shared";import{track,trigger}from"./effect";import{TrackOpTypes,TriggerOpTypes}from"./operations";import{reactive}from&q......