ElementUI,修改el-select下拉框的样式

news2024/11/26 13:57:14
  1. 在使用到el-select组件中设置:popper-append-to-body=“false”
<el-select
    v-model="value"
    :popper-append-to-body="false"
    placeholder="请选择"
>
	  <el-option
	      v-for="item in options"
	      :key="item.value"
	      :label="item.label"
	      :value="item.value">
	  </el-option>
</el-select>
  1. 修改样式
<style lang="scss" scoped>
//修改的是el-input的样式

//一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色

//另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色

::v-deep .el-select,
::v-deep .el-input,
::v-deep .el-input__inner{
  border-radius: 10px;
  color:#fff;
  //border: 1px solid green;
  border-radius:0px;
  border-color:green;
  text-align: center;
}

//el-input聚焦的时候 外层的border会有一个样式
::v-deep .el-select .el-input.is-focus .el-input__inner{
  //border:0px;
  border: 1px solid green;
}

//修改的是el-input上下的小图标的颜色

::v-deep .el-select .el-input .el-select__caret{
  color: green;

}

//修改总体选项的样式 最外层

::v-deep .el-select-dropdown{
  //rgba(87,133,87,0.8)
  background: rgba(87, 133, 87, 0.78);
  //margin: 0px;
  border:0px;
  //border-radius: 0px;
  //left: 0px !important;

}

//修改单个的选项的样式

::v-deep .el-select-dropdown__item{
  background-color: transparent;
  color:#fff;
}

//item选项的hover样式

::v-deep .el-select-dropdown__item.hover,

::v-deep .el-select-dropdown__item:hover{
  color: rgb(21, 94, 38);
  background: rgba(87, 133, 87, 0.3);
}

//修改的是下拉框选项内容上方的尖角
::v-deep .el-popper .popper__arrow, .el-popper .popper__arrow::after{
  display: none;
}
</style>

  1. 效果
    在这里插入图片描述

参考:
https://blog.csdn.net/qq_26695613/article/details/127870263

https://blog.csdn.net/Alone_Endeavor/article/details/130986687

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

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

相关文章

农业物联网市场调研:2023年市场现状及发展机遇

近年来数字农业发展迅猛&#xff0c;不仅对我国农业经济快速发展产生了积极影响&#xff0c;而且已经成为全球发展最快的数字农业产业之一。数字农业未来的发展前景虽然非常富有吸引力。数字经济快速发展背景下&#xff0c;“数字农业”应运而生。 何谓农业物联网&#xff1f;农…

Android Studio设置android:background 属性背景颜色

除了默认的颜色之外都要自己添加。 添加颜色的操作步骤&#xff1a; 打开res文件夹&#xff0c;找values&#xff0c;里面有个colors.xml的文件。然后在里面定义一些颜色。 完成

持续集成交付CICD:Jenkins使用GitLab共享库实现前端项目镜像构建

目录 一、实验 1. GitLab修改项目文件与Harbor环境确认 2.Jenkins使用GitLab共享库实现前端项目镜像构建 3.优化CI流水线封装Harbor账户密码 4.Jenkins再次使用GitLab共享库实现前端项目镜像构建 一、实验 1. GitLab修改项目文件与Harbor环境确认 &#xff08;1&#xf…

Day64力扣打卡

打卡记录 方格取数&#xff08;线性DP&#xff09; import sys input sys.stdin.readline 输入样例&#xff1a; 8 2 3 13 2 6 6 3 5 7 4 4 14 5 2 21 5 6 4 6 3 15 7 2 14 0 0 0 输出样例&#xff1a; 67 n int(input()) w [[0] * (n 1) for _ in range(n 1)] while Tru…

三大主流前端框架介绍

在前端项目中&#xff0c;可以借助某些框架&#xff08;如React、Vue、Angular等&#xff09;来实现组件化开发&#xff0c;使代码更容易复用。此时&#xff0c;一个网页不再是由一个个独立的HTML、CSS和JavaScript文件组成&#xff0c;而是按照组件的思想将网页划分成一个个组…

Android-----AndroidManifests.xml 之meta-data

一、概念 meta-data&#xff1a;元数据、文件元数据。主要用来定义一些组件相关的配置值。 metadata是一组供父组件使用的名值对&#xff08;name-value pair&#xff09;&#xff0c;一个组件元素可以包含任意数量的meta-data子元素。这些子元素的值存放在一个 Bundle 对象中…

Qt-QTransform介绍与使用

QTransform是一个用于二维坐标系转换的类。我们知道Qt的坐标系是左上角为原点&#xff0c;x轴向右&#xff0c;y轴向下&#xff0c;屏幕上每个像素代表一个单位&#xff0c;那么&#xff0c;如果我们想要在屏幕上建立自己的坐标系用于绘制&#xff0c;就需要借助QTransform。 …

分布式链路追踪 —— 基于Dubbo的traceId追踪传递

文章目录 原文链接RpcContext 上下文对象Dubbo 过滤器&#xff08;Filter&#xff09;对象基于Dubbo的traceId追踪传递实现 原文链接 RpcContext 上下文对象 在实现 Dubbo 调用之间的链路跟踪之前&#xff0c;先简单了解 RpcContext 上下文对象和 Filter 过滤器对象&#xff…

Koa.js 入门手册:洋葱模型插件机制详解以及常用中间件

前言 Nodejs 提供了 http 能力&#xff0c;我们通过如下代码可以快速创建一个http server服务 const http require(http);http.createServer((req, res) > {res.write(hello\n);res.end();}).listen(3000);使用nodejs提供的原生能力启动一个http server并不麻烦&#xff…

详细教程 - 从零开发 Vue 鸿蒙harmonyOS应用 第六节(js版) ——模块化设计实现复杂页面

随着HarmonyOS生态的日渐完善,越来越多的厂商加入鸿蒙系统应用开发的行列。然而从其他系统转到鸿蒙开发,很多开发者还是需要一个适应的过程,特别是面对比较复杂的页面,应该如何合理进行模块化拆分是一个难点。 本文将通过一个实例,来分析如果采用模块化的方式实现一个包含丰富内…

redis各种数据类型的应用场景

String应用场景 单值缓存 SET key value GET key 对象缓存 SET user:1 value(json格式数据)MSET user:1:name zhuge user:1:balance 1888 MGET user:1:name user:1:balance 分布式锁 SETNX product:10001 true //返回1代表获取锁成功 …

7天速成Python——第三天

[7天速成Python——第三天] 3 数据类型 布尔值&#xff08;bool&#xff09;&#xff1a;True False整型&#xff08;int&#xff09; &#xff1a;1 19 22 300字符串&#xff08;str&#xff09; &#xff1a;"中国联通" upper/lower/isdecimal/strip/lstrip/r…

Postman使用总结--关联

当接口和接口之间&#xff0c;有依赖关系时&#xff0c;需要借助 postman 关联技术来实现

【算法与数据结构】LeetCode55、45、跳跃游戏 I 、II

文章目录 一、跳跃游戏I二、跳跃游戏II三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、跳跃游戏I 思路分析&#xff1a;本题目标是根据跳跃数组的元素&#xff0c;判断最终能够到达数组末端。我们引入了一个跳跃范围…

后端低代码平台探索总结

业务需求快速变化的背景 我们在对业务需求进行梳理后&#xff0c;在进行程序设计时&#xff0c;对于将来可能发生变化的常量、变量、阀值、开关、条件、公式等等&#xff0c;可能会配置在环境变量或数字字典来支持可配置。但是需求变化往往会更加复杂、更加不可预测&#xff0…

Java中Exception的使用方法

Exception介绍异常处理机制的优缺点常见的Exception异常处理的常见错误优雅的处理异常异常处理中存在的性能问题Java自定义异常示例 Exception介绍 在Java中&#xff0c;异常&#xff08;Exception&#xff09;是一种特殊类型的对象&#xff0c;表示程序运行过程中发生的意外或…

智慧养老:创新科技让老年生活更美好

智慧养老&#xff1a;创新科技让老年生活更美好 随着人口老龄化的加剧&#xff0c;智慧养老成为了关注焦点。智慧养老以创新科技为核心&#xff0c;旨在改善老年人的生活品质、促进健康、增强安全感和社会融入感。本文将详细介绍智慧养老的关键技术和应用场景&#xff0c;带您了…

iPhone16:首款AI iPhone?

随着科技水平的不断发展&#xff0c;智能手机逐渐成为人们最依赖的电子产品之一。为能够满足用户需求&#xff0c;手机的硬件、外观设计与性能飞速提升&#xff0c;这也导致智能手机市场快速进入到瓶颈期。 为了能够带来更优秀的表现&#xff0c;苹果可能会为iPhone 16系列带来…

黑马React:基础拓展

黑马React: D10-基础拓展 Date: December 18, 2023 useReducer 基础使用 作用: 让 React 管理多个相对关联的状态数据 补充&#xff1a;和useState的作用类似&#xff0c;用来管理相对复杂的状态数据 **特点&#xff1a;**useReducer返回值为一个数组, 可以解构处数值stat…

【具身智能评估9】Open X-Embodiment: Robotic Learning Datasets and RT-X Models

论文标题&#xff1a;Open X-Embodiment: Robotic Learning Datasets and RT-X Models 论文作者&#xff1a;– 论文原文&#xff1a;https://arxiv.org/abs/2310.08864 论文出处&#xff1a;– 论文被引&#xff1a;–&#xff08;12/18/2023&#xff09; 论文代码&#xff1a…