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

修改el-select样式

puppet 复制代码
.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;" />

puppet 复制代码
.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; // 字体色
  }

}
相关推荐
paopaokaka_luck18 分钟前
基于springboot+vue的智慧家政管理系统(AI问答、 WebSocket实时沟通、ECharts运营分析、订单规则与服务追踪)
java·javascript·spring boot·数据分析·echarts·mybatis
溪语流沙1 小时前
【每天一个CSS | Day19】流光文字与一笔写成的手写签名
前端·javascript·css
CDwenhuohuo2 小时前
electron pc项目打包成桌面端
前端·javascript·electron
计算机毕设定制辅导-无忧学长4 小时前
《校园食堂在线订餐小程序的设计与实现》
java·vue.js·spring boot·微信小程序·uniapp·校园食堂在线订餐小程序
EatFan4 小时前
React 项目踩坑实录:useEffect 闭包陷阱、Context 性能陷阱与 React 18 升级避坑排查手册
前端·javascript·react.js·react·react hooks·useeffect·闭包陷阱
咖啡无伴侣6 小时前
1. 别再手动改代码格式了!Vue3 项目工程化规范搭建实战
vue.js·架构
w2sfot8 小时前
【JS加密在线】jsjiami.online(让JavaScript 更安全!)
开发语言·javascript·安全
知野小兔8 小时前
Vuex和Pinia状态管理
vue.js
VX_bysjlw9859 小时前
数码设备销售网站设计与实现39138-计算机毕设原创(免费领源码+带部署教程)
java·vue.js·spring boot·mysql·tomcat·mybatis·idea
杨杰39812 小时前
我给嵌入式设备写了个 6MB 的 JavaScript 运行时(xuan)
javascript