element ui修改select选择框背景色和边框色

news2024/10/5 20:17:38
一、修改选择框的背景色和边框色

style部分

.custom-select /deep/ .el-input__inner {
  color: #fff!important;
  border: 1px solid #326AFF;
  background: #04308D !important;
}

html部分

 <el-select class="custom-select" v-model="dhvalue" placeholder="请选择" style="width:90%" size="mini">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>

要添加class="custom-select",

我的字体设置不成功,修改样式

.custom-select /deep/ .el-input__inner::placeholder {
color: #fff;
}

二、修改下拉选项的样式

添加:popper-append-to-body="false" 

<el-select  :popper-append-to-body="false" class="custom-select" v-model="dhvalue" placeholder="请选择" style="width:90%" size="mini">
                <el-option value="1">12</el-option>
                <el-option value="1">123</el-option>
                <el-option value="1">124</el-option>
                <el-option value="1">125</el-option>
                
                </el-select>
/* // 设置下拉框的背景颜色及边框属性; */
.custom-select  /deep/.el-select-dropdown {
  /* // 若不将下拉框的背景颜色设置为:transparent,那么做不出来半透明的效果;
  // 因为其最终的显示为:下拉框有一个背景颜色且下拉框的字体有一个背景颜色,重叠后的效果展示; */
  border: 1px solid #326AFF;
background: #04308D !important;
}

/* // 设置下拉框的字体属性及背景颜色; */
.custom-select  .el-select-dropdown__item {
  font-size: 7px;
  color: #fff;
  font-weight: 200;
  background-color:  #04308D ;
}

/* // 设置下拉框列表的 padding 值为:0;(即:样式调整) */
.custom-select  /deep/.el-select-dropdown__list {
  /* padding-top: 10px; */
  padding: 0;
}

/* // 设置输入框与下拉框的距离为:0; (即:样式调整) */
.custom-select  /deep/.el-popper[x-placement^="bottom"] {
  margin-top: 5px;
}

/* // 将下拉框上的小箭头取消;(看着像一个箭头,其实是两个重叠在一起的箭头) */
.custom-select  /deep/.el-popper .popper__arrow,
.custom-select  /deep/.el-popper .popper__arrow::after {
  display: none;
}

/* // 设置鼠标悬停在下拉框列表的悬停色; */
.custom-select  /deep/.el-select-dropdown__item:hover {
  color: rgb(213, 215, 230);
  background-color:#326AFF;
}

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

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

相关文章

高济健康:数字化科技创新与新零售碰撞 助推医疗产业优化升级

近日&#xff0c;第六届中国国际进口博览会在上海圆满落幕&#xff0c;首次亮相的高济健康作为一家专注大健康领域的疾病和健康管理公司&#xff0c;在本届进博会上向业内外展示了围绕“15分钟步行健康生活圈”构建进行的全域数字化升级成果。高济健康通过数字化科技创新与新零…

Linux安装OpenCV并配置VSCode环境

Linux安装OpenCV并配置VSCode环境 安装OpenCV环境安装必需工具下载并解压OpenCV库&#xff08;Opencv Core Modules和opencv_contrib&#xff09;创建构建目录&#xff0c;进行构建验证构建结果安装验证安装结果 配置VSCode环境创建项目文件修改配置信息执行程序 安装环境 Ubun…

【计算思维】少儿编程蓝桥杯青少组计算思维题考试真题及解析D

STEMA考试-计算思维-U8级(样题) 21.下面哪个图形与其它图形不同&#xff1f;&#xff08; &#xff09; A. B. C. D. 22.下列哪个选项是由下图旋转得到的&#xff1f;&#xff08; &#xff09; A. B. C. D. 23.下面哪个图形是用4个 拼成的&#xff1f;&#xff08; &#xf…

JDK 9 Map.of()

//Java 9 Map.of //private static final int SIZE 10;

某60区块链安全之整数溢出漏洞实战学习记录

区块链安全 文章目录 区块链安全整数溢出漏洞实战实验目的实验环境实验工具实验原理攻击过程分析合约源代码漏洞EXP利用 整数溢出漏洞实战 实验目的 学会使用python3的web3模块 学会以太坊整数溢出漏洞分析及利用 实验环境 Ubuntu18.04操作机 实验工具 python3 实验原理…

Windows安装nvm【node.js版本管理工具】

目录 下载安装包 安装 配置 配置node的国内镜像源 配置npm的国内镜像源 常用命令 查看可安装的node版本 安装指定的版本 查看已有的node版本列表 切换版本 下载安装包 https://github.com/coreybutler/nvm-windows/releases/tag/1.1.11 安装 安装过程就不贴了&#xff0…

Android 当中的 Fragment 协作解耦方式

Android 当中的 Fragment 协作解耦方式 文章目录 Android 当中的 Fragment 协作解耦方式第一章 前言介绍第01节 遇到的问题第02节 绘图说明 第二章 核心代码第01节 代理人接口第02节 中间人 Activity第03节 开发者A第04节 开发者B第05节 测试类 第一章 前言介绍 第01节 遇到的…

DolphinScheduler V3.1.8 海豚调度器【概述、安装、功能介绍、项目运用、邮箱预警设置】轻松拿捏!

概述 Apache DolphinScheduler 是一个分布式易扩展的可视化 DAG 工作流任务调度开源系统。适用于企业级场景&#xff0c;提供了一个可视化操作任务、工作流和全生命周期数据处理过程的解决方案。 Apache DolphinScheduler 旨在解决复杂的大数据任务依赖关系&#xff0c;并为应…

计算机毕业设计选题推荐-高校后勤报修微信小程序/安卓APP-项目实战

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…

【ES6标准入门】JavaScript中的模块Module的加载实现:循环加载和Node加载,非常详细,建议收藏!!!

&#x1f601; 作者简介&#xff1a;一名大四的学生&#xff0c;致力学习前端开发技术 ⭐️个人主页&#xff1a;夜宵饽饽的主页 ❔ 系列专栏&#xff1a;JavaScript进阶指南 &#x1f450;学习格言&#xff1a;成功不是终点&#xff0c;失败也并非末日&#xff0c;最重要的是继…

LLM大模型 (chatgpt) 在搜索和推荐上的应用

目录 1 大模型在搜索的应用1.1 召回1.1.1 倒排索引1.1.2 倒排索引存在的问题1.1.3 大模型在搜索召回的应用 (实体倒排索引&#xff09; 1.2 排序1.2.1 大模型在搜索排序应用&#xff08;融入LLM实体排序&#xff09; 2 大模型在推荐的应用2.1 学术界关于大模型在推荐的研究2.2 …

PDF控件Spire.PDF for .NET【转换】演示:将PDF 转换为 HTML

由于各种原因&#xff0c;您可能想要将 PDF 转换为 HTML。例如&#xff0c;您需要在社交媒体上共享 PDF 文档或在网络上发布 PDF 内容。在本文中&#xff0c;您将了解如何使用Spire.PDF for .NET在 C# 和 VB.NET 中将 PDF 转换为 HTML。 Spire.Doc 是一款专门对 Word 文档进行…

Day33力扣打卡

打卡记录 最大和查询&#xff08;排序单调栈上二分&#xff09; 链接 大佬的题解 class Solution:def maximumSumQueries(self, nums1: List[int], nums2: List[int], queries: List[List[int]]) -> List[int]:ans [-1] * len(queries)a sorted(((a, b) for a, b in zi…

专业数据标注公司:景联文科技领航数据标注行业,满足大模型时代新需求

随着大模型的蓬勃发展和相关政策的逐步推进&#xff0c;为数据要素市场化配置的加速推进提供了有力的技术保障和政策支持。数据要素生产力度的不断提升&#xff0c;为数据标注产业带来了迅速发展的契机。 根据国家工信安全发展研究中心测算&#xff0c;2022年中国数据加工环节的…

​软考-高级-系统架构设计师教程(清华第2版)【第11章 未来信息综合技术(P384~P419)-思维导图】​

软考-高级-系统架构设计师教程&#xff08;清华第2版&#xff09;【第11章 未来信息综合技术&#xff08;P384~P419&#xff09;-思维导图】 课本里章节里所有蓝色字体的思维导图

python趣味编程-5分钟实现一个Tic Tac Toe游戏(含源码、步骤讲解)

The Tic Tac Toe In Python是用 Python 编程语言编写的,这个Tic Tac Toe Game In Python是一个简单的基于 GUI 的策略游戏板,非常容易理解和使用。 所有的游戏规则都是一样的,就像我们玩实时井字棋一样,这是一个简单的多人游戏。 Python 中的 Tic Tac Toe 游戏:项目信息 …

数字化时代,VR全景如何助力商企抢占市场份额?

随着5G技术的逐步落地&#xff0c;VR全景已经开始逐渐被应用到各行各业中了&#xff0c;VR餐饮、VR房产、VR景区、VR工厂、VR学校、VR博物馆等等&#xff0c;甚至大家所熟悉的汽车之家中的全景看车、贝壳和链接的全景看房等&#xff0c;所应用的都是VR全景的形式。 前几年电商对…

电子学会C/C++编程等级考试2021年09月(一级)真题解析

C/C++等级考试(1~8级)全部真题・点这里 第1题:数字判断 输入一个字符,如何输入的字符是数字,输出yes,否则输出no 输入 一个字符 输出 如何输入的字符是数字,输出yes,否则输出no 样例1输入 样例1输入 5样例1输出 yes样例2输入 A 样例2输出 …

前端NaN解决方案

// 2.3 函数表达式可以传递参数还可以有返回值&#xff0c;使用方法和前面具名函数类似let sum function (x, y) { // 形参xx||0yy||0return x y}let re sum() // 实参console.log(re) // 3 function sum(x 0, y 0) {return x y}console.log(sum()) // 0console.log(s…

centos7安装keepalived 保证Nginx的高可用

keepalived工作在虚拟路由器冗余协议 VRRP (Virtual Router Redundancy Protocol) 上&#xff0c;它允许一个静态 IP 在两个 Linux 系统之间进行故障转移。 环境准备&#xff1a; 两台虚拟机centos7&#xff0c;IP&#xff1a;192.168.213.4(backup) 192.168.213.6(master) 安…