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

QCOM和其他常见芯片平台术语缩写

1 QCOM 1.1 General Qualcomm: Quality Communications ALSA DCP&#xff1a;ALSA由DAI、Codec、Platform三部分组成 ALSA TLV&#xff1a;Type-Length-Value Alternative Mode: 替代模式 ANC&#xff1a;Automatic Noise Canceller ASM: Anntena Switch Module AT&#xff1a;…

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

reverse_iterator实现

对于实现reverse_iterator&#xff0c;我们可以学栈和队列的实现过程&#xff0c;利用适配器&#xff0c;实现如下; #pragma oncetemplate<class Iterator,class Ref,class Ptr> class reverse_Iterator { public://构造函数&#xff1a;reverse_Iterator(Iterator it):…

阿里春招必看:Spring面试题全解析,详尽到每个角落!99%的Java工程师都在收藏!

在迈入2024年的春季招聘季节之际&#xff0c;阿里巴巴再次展开了对优秀技术人才的寻觅。作为一家全球领先的技术创新企业&#xff0c;阿里巴巴对候选人的技术能力和创新思维有着极高的要求&#xff0c;尤其是在软件开发领域。Spring框架&#xff0c;作为Java企业级应用开发的重…

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;但实际上还是有一些坑…

2022蓝桥杯/修剪灌木/c\c++

问题描述 爱丽丝要完成一项修建灌木的工作。有N棵灌木整齐的从左到右排成一排。爱丽丝在每天傍晚会修剪一棵灌木&#xff0c;让灌木的高度变为0厘米。爱丽丝修剪灌木的顺序是从最左侧的灌木开始&#xff0c;每天向右修剪一棵灌木。当修剪了最右侧的灌木后&#xff0c;它会调转方…

爬虫的基本原理介绍,实现以及问题解决

爬虫 基本原理实现方式问题解决额外考虑 爬虫是一种自动化程序&#xff0c;用于从互联网上收集信息。其基本原理是模拟人类用户在网页上的浏览行为&#xff0c;通过发送HTTP请求获取网页内容&#xff0c;然后解析和提取所需的信息。 基本原理 发送请求&#xff1a; 爬虫首先向…

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

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

Elasticsearch数据存储优化方案

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

ARTS Week 21

Algorithm 本周的算法题为 565. 数组嵌套 索引从0开始长度为N的数组A&#xff0c;包含0到N - 1的所有整数。找到最大的集合S并返回其大小&#xff0c;其中 S[i] {A[i], A[A[i]], A[A[A[i]]], ... }且遵守以下的规则。 假设选择索引为i的元素A[i]为S的第一个元素&#xff0c;S…

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 在正式介绍这些 …

Vue3项目随笔

目录 富文本编辑器 [ vue-quill ]的使用步骤 1&#xff0c;安装包 2&#xff0c;注册成局部组件 3&#xff0c;页面中绑定使用 4&#xff0c;样式美化 5&#xff0c;涉及表单内容 富文本内容的清空 富文本编辑器 [ vue-quill ]的使用步骤 1&#xff0c;安装包 pnpm add…

CornerStone之读取txt文件点数据

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