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

news2024/11/27 4:38:03

修改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.coloradmin.cn/o/858724.html

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

相关文章

CSGO搬砖会被红锁吗?不清楚这些的话steam搬砖大家千万别做。

科思创业汇 大家好&#xff0c;这里是科思创业汇&#xff0c;一个轻资产创业孵化平台。赚钱的方式有很多种&#xff0c;我希望在科思创业汇能够给你带来最快乐的那一种&#xff01; 在CSGO游戏中&#xff0c;许多玩家通过搬砖赚钱。小编整理了相关资料。让我们看看&#xff0…

单芯片3路CC管理的VR转接器解决方案

VR眼镜即VR头显&#xff0c;也称虚拟现实头戴式显示设备&#xff0c;随着元宇宙概念的传播&#xff0c;VR眼镜的热度一直只增不减&#xff0c;但是头戴设备的续航一直被人诟病&#xff0c;如果增大电池就会让头显变得笨重影响体验&#xff0c;所以目前最佳的解决方案还是使用VR…

微信开发之一键修改好友标签的技术实现

移除标签下的好友&#xff1a; 把需移除的好友所有标签查出来&#xff08;通讯录详情接口返回标签id&#xff0c;数据库需缓存&#xff09;&#xff0c;去掉想移出的标签id&#xff0c;labelIdList参数放进其他所有标签id。 增加标签新好友&#xff1a; 把需添加的好友所有标签…

STM32入门——ADC模数转换

ADC简介 ADC&#xff08;Analog-Digital Converter&#xff09;模拟-数字转换器ADC可以将引脚上连续变化的模拟电压转换为内存中存储的数字变量&#xff0c;建立模拟电路到数字电路的桥梁12位逐次逼近型ADC&#xff0c;1us转换时间输入电压范围&#xff1a;0~3.3V&#xff0c;…

数据结构---B树

目录标题 B-树的由来B-树的规则和原理B-树的插入分析B-树的插入实现准备工作find函数insert中序遍历 B-树的性能测试B-树的删除B树B树的元素插入B*树的介绍 B-树的由来 在前面的学习过程中&#xff0c;我们见过很多搜索结构比比如说顺序查找&#xff0c;二分查找&#xff0c;搜…

C++ 计算 拟合优度R^2

解决的问题&#xff1a; 拟合优度(Goodness of Fit)是指回归直线对观测值的拟合程度&#xff0c;度量拟合优度的统计量是可决系数(亦称确定系数) R?。R最大值为 1。R%的值越接近1&#xff0c;说明回归直线对观测值的拟合程度越好&#xff0c;反之&#xff0c;R%值越小&#x…

腾讯云香港服务器租用价格_CN2线路延迟速度测试

腾讯云香港服务器&#xff0c;目前中国香港地域轻量应用服务器可选配置2核2G20M、2核2G30M、2核4G30M&#xff0c;操作系统可选Windows和Linux&#xff0c;不只是香港云服务器&#xff0c;新加坡、硅谷、法兰克福和东京服务器均有活动&#xff0c;腾讯云服务器网分享腾讯云境外…

Java开发要学哪些知识点?建议收藏

随着信息技术的快速发展&#xff0c;Java语言技能成为了企业招聘市场上最受欢迎的技能之一。在这样的市场需求下&#xff0c;Java开发也成为了很多人想要掌握的基本技能之一。那么&#xff0c;我们在学习Java开发时&#xff0c;应当掌握哪些知识点呢?下面&#xff0c;小编将为…

微信小程序调用map数据 并在wxml中对数组进行截取的操作

wxs文件的位置如图 实现数组截取 只保留五张图片 <wxs module"filter" src"./slicefunc.wxs"></wxs> <view class"wrap"><view class"search-box" bindtap"toSearch"><view class"v1"…

Linux系统的Centos7扩容主分区

前言&#xff1a;在学习C#的过程中电脑里面的项目&#xff0c;镜像越来越多之前装系统的时候分配的空间太小导致Linux系统空间不足&#xff0c;应该怎么办呢&#xff0c;lets go 跟着我来将centOS 7扩容吧. 1.关闭虚拟机&#xff0c;在VMWare的”此虚拟机设置“中找到硬盘&…

14个前端开发者应该知道的实用网站

在本文中&#xff0c;我将分享一些非常有用的网站合集&#xff0c;这些网站可以在你的日常工作中极大地帮助你。这些网站已经成为我各种任务的首选资源&#xff0c;节省了我的时间&#xff0c;提高了工作效率 文档自动化 Documatic 是一款专为开发人员设计的非常高效的搜索引擎…

让我们一起探讨汽车充电桩控制主板的应用

你是否想过&#xff0c;你的汽车充电桩可以更智能?可以支持更多类型的电池&#xff0c;更多操作系统&#xff0c;更多协议和更多电源?让我们一起探讨汽车充电桩控制主板的应用。 控制主板是充电桩的大脑&#xff0c;它可以应用于各种充电桩&#xff0c;包括智能充电桩、电动汽…

windows常用shell命令大全

简介 基于鼠标操作的后果就是OS界面外观发生改变&#xff0c; 就得多花学习成本。更主要的是基于界面引导Path与命令行直达速度是难以比拟的。另外Geek很大一部分是键盘控&#xff0c;而非鼠标流的。 整理Windows的常用Shell命令&#xff0c;一方面帮助深入学习Mysql&#xf…

MyBatisPlus的介绍

本资料仅用于学习和讨论&#xff0c;如有侵权请反馈 https://mp .baomidou. com/ MyBatis-Plus 1.1 为什么网站叫做苞米逗是国人开发的 1.2 点击快速开发 1.3 点击快速开始 1.4 Mybatis的特性 2、快速的把数据层的标准开发给做完&#xff1a; 2.1上来就来标准开发了&#xf…

C++的六大“天选之子“拷贝构造与与运算符重载

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

甄知头条 | 燕千云与TeamCenter深度集成,无缝连接!打造协作利器

​ 甄知科技旗下的“燕千云数智化业务服务平台”近日与TeamCenter进行深度集成&#xff0c;形成合力&#xff0c;为使用TeamCenter软件的企业提供了更加全面、高效、智能的数字化转型解决方案。 Teamcenter&#xff0c;是全世界最广泛使用的PLM系统&#xff0c;是业内首个将单个…

奇安信天擎导致软件无法卸载 - 解决方案

奇安信天擎导致软件无法卸载 - 解决方案 前言安全模式解决方案进入安全模式卸载无法卸载的软件 前言 若电脑中安装了奇安信天擎&#xff0c;此软会时刻监控系统&#xff0c;禁止某些程序运行&#xff0c;开机自启且无法主动退出。但可能会出现这样一种情况&#xff0c;安装某软…

Android Studio实现滑动图片验证码

源代码链接 效果: MainActivity package com.example.slidingpattern;import androidx.appcompat.app.AppCompatActivity;import android.annotation.SuppressLint; import android.graphics.BitmapFactory; import android.os.Bundle; import android.view.MotionEvent; i…

Django实现音乐网站 ⑽

使用Python Django框架制作一个音乐网站&#xff0c; 本篇主要是后台对歌曲类型、歌单功能原有功能进行部分功能实现和显示优化。 目录 歌曲类型功能优化 新增编辑 优化输入项标题显示 父类型显示改为下拉菜单 列表显示 父类型显示名称 过滤器增加父类型 歌单表功能优化…