修改输入框选择框颜色

项目场景:

提示:这里简述项目相关背景:

有时候需要改写element原来输入框/选择框的颜色


问题描述

提示:这里描述项目中遇到的问题:

输入框的话需要hover时边框颜色修改,选择值的时候边框颜色修改以及选中后边框颜色修改。

输入框的话只有hover时边框颜色修改,获得光标时候边框颜色修改


解决方案:

提示:这里填写该问题的具体解决方案:

1:选择框:

css 复制代码
// 输入框 、 选择框 平时的状态颜色
/deep/.el-input__inner {
  height: 50px;
  box-shadow:0 0 1px 1px #eeeeee;
  border-radius: 3px;
  border: 1px solid #cccccc;
}
// 选择框 选择时的颜色(获得光标时的颜色)
/deep/.el-select .el-input.is-focus .el-input__inner {
    // box-shadow: 0 0 0 0.7px #00AC1F inset !important;
    box-shadow: 0 0 0 1px #00AC1F inset !important;
}
// 选择框 选中后 的颜色 (选中值后失去光标)
/deep/.el-select .el-input__inner:focus {
    // box-shadow: 0 0 0 0.7px #00AC1F inset !important;
    box-shadow: 0 0 0 1px #00AC1F inset !important;
}
// 选择框 hover时 的颜色
/deep/.el-select:hover:not(.el-select--disabled) .el-input__inner {
    // box-shadow: 0 0 0 0.7px #00AC1F inset;
    box-shadow: 0 0 0 1px #00AC1F inset !important;
}

2:输入框

css 复制代码
// 输入框正常状态时边框
/deep/.el-input__inner{
  height: 50px;
  box-shadow: 0 0 0 0 #ffffff;
  border-radius:3px 0 0 3px ;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
  // 右边不加border因为右边用icon图标box的border
}
// 输入框hover时边框颜色
/deep/ .el-input__inner:hover{
  border-color: #00AC1F !important;
}
// 输入框 获得光标 是边框颜色
/deep/.el-input__inner:focus{
  border-color: #00AC1F ;
  box-shadow: 0 0 0 0 #00AC1F;
}
相关推荐
木斯佳2 小时前
前端八股文面经大全:bilibili生态技术方向二面 (2026-03-25)·面经深度解析
前端·ai·ssd·sse·rag
不会写DN2 小时前
Gin 日志体系详解
前端·javascript·gin
冬夜戏雪2 小时前
实习面经记录(十)
java·前端·javascript
爱学习的程序媛4 小时前
【Web前端】JavaScript设计模式全解析
前端·javascript·设计模式·web
小码哥_常4 小时前
从SharedPreferences到DataStore:Android存储进化之路
前端
老黑4 小时前
开源工具 AIDA:给 AI 辅助开发加一个数据采集层,让 AI 从错误中自动学习(Glama 3A 认证)
前端·react.js·ai·nodejs·cursor·vibe coding·claude code
jessecyj4 小时前
Spring boot整合quartz方法
java·前端·spring boot
苦瓜小生5 小时前
【前端】|【js手撕】经典高频面试题:手写实现function.call、apply、bind
java·前端·javascript
天若有情6735 小时前
前端HTML精讲03:页面性能优化+懒加载,搞定首屏加速
前端·性能优化·html
踩着两条虫5 小时前
AI驱动的Vue3应用开发平台深入探究(十):物料系统之内置组件库
android·前端·vue.js·人工智能·低代码·系统架构·rxjava