【vue elementUI】el-select和弹出框el-option样式调整,::v-deep失效

组件自带样式:

修改后样式:

注意修改弹出框样式需要修改一个属性:

此属性默认值为true,此时可以看到弹出框是放在外面的,没有在el-select里面。此时设置弹窗样式会不生效,::v-deep无效。

需要将此属性改为false,代码如下:

              <div style="height: 20%" class="xlcd"><el-select:popper-append-to-body="false"size="mini"v-model="optionVideo"placeholder="请选择设备"@change="changePlantBase"clearablefilterable><el-optionv-for="item in devListNew":key="item.id":label="item.deviceName":value="item.id"></el-option></el-select></div>

 样式修改代码如下:

.xlcd { // 修改input默认值颜色 兼容其它主流浏览器::v-deep input::-webkit-input-placeholder {color: rgba(255, 255, 255, 0.50);}::v-deep input::-moz-input-placeholder {color: rgba(255, 255, 255, 0.50);}::v-deep input::-ms-input-placeholder {color: rgba(255, 255, 255, 0.50);}// input框::v-deep .el-select,::v-deep .el-input,::v-deep .el-input__inner {background-color: rgba(255, 255, 255, 0.04);color: rgba(255, 255, 255, 0.50);border: none; // 去掉边框// border-color: #XXXXXX // 默认边框的颜色text-align: left;border-radius: 4px;}// 选中时边框颜色// ::v-deep .el-input__inner:focus{//     border-color: #XXXXXX;// }// 鼠标悬浮时 input框颜色::v-deep .el-input__inner:hover{background-color: rgba(255, 255, 255, 0.12);}// input框 右侧的箭头::v-deep .el-select .el-input .el-select__caret {color: rgba(255, 255, 255, 0.50);}// option选项 上面的箭头::v-deep .el-popper[x-placement^="bottom"] .popper__arrow::after {border-bottom-color: rgba(6, 87, 71,1);z-index: 9999;}::v-deep .popper__arrow {border: none;}// option选项 最外层::v-deep .el-select-dropdown {border: none !important;background: rgba(6, 87, 71,1) !important;z-index: 9999;}// option选项 文字样式::v-deep .el-select-dropdown__item {color: rgba(255, 255, 255, 0.8) !important;z-index: 9999;}::v-deep .el-select-dropdown__item.selected span{color: rgba(255, 255, 255, 0.80) !important;z-index: 9999;}// 移入option选项 样式调整::v-deep .el-select-dropdown__item.hover{background-color: rgba(255, 255, 255, 0.06);color: rgba(255, 255, 255, 0.80) !important;z-index: 9999;}// 下拉框垂直滚动条宽度::v-deep .el-scrollbar__bar.is-vertical {width: 10px;top: 2px;}// 下拉框最大高度::v-deep .el-select-dropdown__wrap {max-height: 200px;}// option选项 下面的箭头::v-deep .el-popper[x-placement^="top"] .popper__arrow::after {border-top-color: rgba(43, 45, 55, 0.80);z-index: 9999;}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/752784.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript练手小技巧:数字反转时钟

样式基于博主的这篇文章&#xff1a; CSS3技巧38&#xff1a;3D 翻转数字效果-CSDN博客 既然可以实现翻转数字了&#xff0c;肯定就可以跟 JS 相结合去完成一些数字展示效果。 比如&#xff0c;数字反转时钟。 为了方便&#xff0c;所有 HTML 数字根据时间动态生成。因此&a…

vue3 element plus 上传下载

文章目录 上传下载 上传 /* html */ <el-upload v-model"fileId" class"avatar-uploader" ref"exampleUploadRef" :file-list"fileList" :show-file-list"false" action"/ys-three-year/ThreeReport/uploadFile&q…

Coarse-to-Fine Latent Diffusion for Pose-Guided Person Image Synthesis阅读笔记

连更&#xff01;&#xff01; 0 Abstract 先前的姿势引导图像合成方法简单的将人的外观与目标姿势进行对齐&#xff0c;这容易导致过拟合&#xff0c;因为缺乏对source person image的high-level semantic understanding&#xff1b;文章开发了一种新的训练范式&#xff1a;…

mudo服务器测试一

目录 长连接测试 测试代码 客户端 服务端 超时连接测试 测试代码 客户端 服务端 错误请求测试 测试代码 场景一 客户端 服务端 场景二 客户端 服务端 长连接测试 测试代码 /*长连接测试1: 创建一个客户端持续给服务器发送数据,直到超过时间看是否正常*/ #inc…

实用工具推荐----geek 卸载软件的神器

Geek Uninstaller 是一款软件卸载工具。它提供简单易用的界面和强大的卸载功能&#xff0c;能快速扫描和识别应用程序&#xff0c;并彻底删除与之相关的文件和注册表项&#xff0c;确保完全清除应用程序。它还可以监视应用程序安装过程&#xff0c;并记录创建的文件和注册表项…

计算机组成原理练习-计算机性能指标

CPU时间与IO时间 ------------------------------------------------------------------------------------------------------------------------------- 1.假定基准程序A在某计算机上的运行时间为100秒&#xff0c;其中90秒为CPU时间&#xff0c;其余 为l/O时间。若CPU速度…

WebGIS之实现查询地区天气并让地区高亮

一.预览>> 二.思路>> 根据搜索框的内容来进行页面视角的切换&#xff0c;对应的地区高亮&#xff0c;右边有关天气的地方实时更新&#xff0c;并且因为代码体量非常小&#xff0c;并没有选择在框架下完成。直接一个html文件搞定了&#xff0c;但实际上还是有一些坑…

带有超令牌采样的视觉转换器

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 摘要Abstract文献阅读&#xff1a;带有超令牌采样的视觉转换器1、研究背景2、方法提出3、优势4、实验5、贡献 二、StokenAttention代码学习 摘要 本周主要阅读了CV…

Elasticsearch数据存储优化方案

优化Elasticsearch数据存储有助于提升系统性能、降低成本、提高数据查询效率以及增强系统的稳定性和可靠性。通常我们再优化Elasticsearch数据存储会遇到一些问题&#xff0c;导致项目卡壳。以下是优化Elasticsearch数据存储的一些重要作用&#xff1a; 1、问题背景 在某些场景…

AI系统性学习03—ChatGPT开发教程

文章目录 1、OpenAI关键概念⭐️2、OpenAI SDK介绍3、OpenAI API KEY&API 认证3.1 REST API安全认证 4、OpenAI模型⭐️4.1 模型分类4.2 GPT44.3 GPT-3.54.4 Embeddings 5、OpenAI快速入门6、Function calling(函数调用)⭐️⭐️⭐️6.1 应用场景6.2 支持function calling的…

打破传统,拥抱未来:解锁企业数字化转型成功的11把金钥匙

数字化转型是一个持续的过程&#xff0c;需要企业不断地适应新技术和市场变化。企业如何提高转型成功的可能性&#xff0c;并在竞争激烈的市场中保持领先地位。今天我们来解锁企业数字化转型成功的11把金钥匙。 清晰的战略目标&#xff1a; 首先&#xff0c;企业需要明确数字化…

如何高效接入 Flink: Connecter / Catalog API 核心设计与社区进展

本文整理自阿里云实时计算团队 Apache Flink Committer 和 PMC Member 任庆盛在 FFA 2023 核心技术专场&#xff08;二&#xff09;中的分享&#xff0c;内容主要分为以下四部分&#xff1a; Source APISink API将 Connecter 集成至 Table /SQL APICatalog API 在正式介绍这些 …

CornerStone之读取txt文件点数据

1. 页面标签 页面中目前只提供一个按钮来进行输入文件 <input click"importZeroOne" type"file" />2. 函数定义 在输入文件之后&#xff0c;执行importZeroOne函数&#xff0c;获得输入的文件&#xff0c;进行以下处理 const importZeroOne((eve…

Vue-Vuex

文章目录 vuex是什么什么时候使用Vuex原理Vuex环境搭建实例操作 vuex是什么 1.专门在vue中实现集中式状态&#xff08;数据&#xff09;管理的一个vue插件&#xff0c;对vue应用中多个组件的共享状态进行集中式的管理&#xff08;读/写&#xff09;&#xff0c;也是一种组件之…

【Django框架学习笔记】超详细的Python后端开发Django框架学习笔记

十二&#xff0c;Django框架 可以以下链接获取Django框架学习笔记,md文档和pdf文档 Django框架超详细的学习笔记&#xff0c;点击我获取 12.1 命令行操作 # 创建django项目 django-admin startproject aini# 启动项目 cd /mysite python3 manage.py runserver## 创建应用 …

23双体系Java学习之字符串的常用操作和==,equals的区别

字符串的常用操作 toCharArray的基本用法&#xff0c;将字符串转变成数组 String str "Hello, World!"; char[] charArray str.toCharArray(); charAt的基本用法 &#xff0c;接受一个整数索引作为参数&#xff0c;并返回该索引位置的字符。 String str "…

Vue+SpringBoot打造康复中心管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 普通用户模块2.2 护工模块2.3 管理员模块 三、系统展示四、核心代码4.1 查询康复护理4.2 新增康复训练4.3 查询房间4.4 查询来访4.5 新增用药 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的康复中…

蚁群算法实现 - 全局路径规划算法

参考博客&#xff1a; &#xff08;1&#xff09;【人工智能】蚁群算法(密恐勿入) &#xff08;2&#xff09;计算智能——蚁群算法 &#xff08;3&#xff09;蚁群算法(实例帮助理解) &#xff08;4&#xff09;【数之道 04】解决最优路径问题的妙招-蚁群ACO算法 &#xff08;…

【计算机网络篇】物理层(2)传输方式

文章目录 &#x1f354;传输方式⭐串行传输和并行传输⭐同步传输和异步传输&#x1f388;同步传输&#x1f388;异步传输 ⭐单向通信&#xff0c;双向交替通信和双向同时通信 &#x1f354;传输方式 在物理层中&#xff0c;传输方式是指数据在传输介质中传输的方式和方法。常见…

基于单片机的灭火机器人设计

目 录 摘 要 I Abstract II 引 言 1 1 系统方案设计 4 1.1 方案论证 4 1.2 灭火机器人系统工作原理 4 2 系统硬件设计 6 2.1 单片机 6 2.2 火焰探测系统设计 8 2.3 灭火系统设计 8 2.4 循迹模块设计 9 2.5 电机驱动模块 10 3 系统软件设计 12 3.1 系统软件开发环境 12 3.2 系统…