修改el-select和el-input样式;修改element-plus的下拉框el-select样式

news/2024/11/17 22:47:24/

修改el-select样式
在这里插入图片描述
在这里插入图片描述

.select_box{// 默认placeholder:deep .el-input__inner::placeholder {font-size: 14px;font-weight: 500;color: #3E534F;}// 默认框状态样式更改:deep .el-input__wrapper {height: 42px;background-color: rgba(0,0,0,0)!important;box-shadow: 0 0 0 1px #204C42 inset!important;--el-select-focus-border-color:#5AC087!important;--el-select-hover-border-color: #5AC087!important;}// 修改下拉框样式-点击框focus:deep .is-focus .el-input__wrapper {box-shadow: 0 0 0 1px #5AC087 inset!important;--el-select-focus-border-color:#5AC087!important;--el-select-hover-border-color: #5AC087!important;}:deep .el-select__caret {color:#5AC087!important;  // 清除按钮}:deep .el-input__inner {color: #5AC087!important; // 选中字体色}
}// 下拉框-展开样式
.el-select-dropdown__item.selected {// background-color: #83e818!important; // 选中
}
.el-select-dropdown__item.hover {background-color: #498f6c!important; // hover
}
:deep .el-dropdown-menu__item:not(.is-disabled) {// color: #182F23!important; // disabled
}
.el-select-dropdown__item {color: #4FC78A !important; // 下拉项颜色
}
:deep .el-popper{background-color: #121f1b!important; // 展开下拉背景border: 1px solid #498f6c!important; // 展开下拉边框
}
:deep .el-popper .el-popper__arrow::before{border-top: 1px solid #498f6c!important; // 箭头按钮边框background-color: #121f1b!important; // 箭头按钮背景色
}

input如下
在这里插入图片描述
<el-input clearable v-model="name" placeholder="请输入" class="input-with-select input_box" style="width: 148px;margin: 0 40px;position: absolute;right:67px;" />

.input_box{// 默认状态样式更改height: 42px;--el-input-bg-color:rgba(0,0,0,0)!important;--el-input-border-color:#204C42!important;--el-input-focus-border-color:#5AC087!important;--el-input-hover-border-color: #5AC087!important;/* 只更改具有.el-input类名的元素的占位符文本样式 */:deep .el-input__inner::placeholder {font-size: 14px;font-weight: 500;color: #3E534F;}// 清除按钮:deep .el-input__clear {color: #5AC087!important;}:deep .el-input__inner {color: #5AC087!important; // 字体色}}

http://www.ppmy.cn/news/1022545.html

相关文章

opencv基础58 傅里叶变换cv2.dft()->(图像增强、图像去噪、边缘检测、特征提取、图像压缩和加密)

傅里叶变换 是啥&#xff1f; 傅里叶变换是以法国数学家让-巴蒂斯特约瑟夫傅里叶&#xff08;Jean-Baptiste Joseph Fourier&#xff09;的名字命名的&#xff0c;以纪念他对这一数学工具的贡献。傅里叶生活在18世纪末和19世纪初&#xff0c;他是一位多才多艺的科学家&#xff…

面试攻略,Java 基础面试 100 问(七)

String 是最基本的数据类型吗? 不是。Java 中的基本数据类型只有 8 个&#xff1a;byte、short、int、long、float、 double、char、boolean&#xff1b;除了基本类型&#xff08;primitive type&#xff09;和枚举类型&#xff08;enumeration type&#xff09;&#xff0c…

12.Eclipse导入Javaweb项目

同事复制一份他的项目给我ekp.rar (懒得从SVN上拉取代码了)放在workspace1目录下 新建一个文件夹 workspace2,Eclipse切换到workspace2工作空间 选择Import导入 选择导入的项目(这里是放到workspace1里面) 拷贝一份到workspace2里面 例子 所有不是在自己电脑上开发的web项目…

ssh使用及免密登录

ssh使用及免密登录 ssh远程登录基本使用方式 打开终端&#xff0c;输入 ssh {userName}{ip}例如 ssh admin192.168.1.100admin是需要远程连接的服务器用户名&#xff0c;192.168.1.100是远程服务器的ip 如果远程服务器的sshd部署在除了22端口以外的端口&#xff0c;那么用…

Java:简单算法:冒泡排序、选择排序、二分查找

冒泡排序 // 1、准备一个数组 int[] arr {5&#xff0c;2&#xff0c;3&#xff0c;1};//2、定义一个循环控制排几轮 for (int i 0; i < arr.length - 1; i) { // i 0 1 2 【5&#xff0c;2&#xff0c;3&#xff0c;1】 次数 // i 0 第一轮 0 1 2 …

如何高效解决“字符串相乘“问题?

&#x1f388;个人主页:&#x1f388; :✨✨✨初阶牛✨✨✨ >&#x1f43b;推荐专栏1: &#x1f354;&#x1f35f;&#x1f32f;C语言初阶 &#x1f43b;推荐专栏2: &#x1f354;&#x1f35f;&#x1f32f;C语言进阶 &#x1f511;个人信条: &#x1f335;知行合一 金句分…

粉碎文件夹怎么操作?简单4步,轻松完成!

“姐妹们&#xff0c;想问问大家如果想要粉碎文件夹应该怎么操作呀&#xff1f;电脑小白一枚&#xff01;真的很需要一个方法&#xff01;感谢&#xff01;” 在数字化的时代&#xff0c;隐私和数据安全变得尤为重要。当需要彻底删除敏感文件夹时&#xff0c;简单的删除操作可能…

cmake扩展(2)——windows下动态设置输出文件(dll/exe)版本

准备 windows下设置文件的版本需要通过VERSIONINFO接口&#xff0c;详情参考VERSIONINFO resource。这里我们根据模板做了一定的修改。 1 VERSIONINFOFILEVERSION ${GIT_VERSION} //文件版本号&#xff0c;必填。以,分隔&#xff0c;输出以.分隔。这里是取CMakeLists里的GIT_…