修改输入框选择框颜色

项目场景:

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

有时候需要改写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;
}
相关推荐
还有你Y1 小时前
Shell 脚本语法
前端·语法·sh
踩着两条虫3 小时前
如何评价VTJ.PRO?
前端·架构·ai编程
Mh4 小时前
鼠标跟随倾斜动效
前端·css·vue.js
小码哥_常5 小时前
Kotlin类型魔法:Any、Unit、Nothing 深度探秘
前端
Web极客码6 小时前
深入了解WordPress网站访客意图
服务器·前端·wordpress
幺风6 小时前
Claude Code 源码分析 — Tool/MCP/Skill 可扩展工具系统
前端·javascript·ai编程
vjmap6 小时前
唯杰地图CAD图层加高性能特效扩展包发布
前端·gis
ZC跨境爬虫6 小时前
3D 地球卫星轨道可视化平台开发 Day7(AI异步加速+卫星系列精简+AI Agent自动评论)
前端·人工智能·3d·html·json
ID_180079054737 小时前
淘宝 API 上货 / 商品搬家 业务场景实现 + JSON 返回示例
前端·javascript·json
M ? A7 小时前
Vue 动态组件在 React 中,VuReact 会如何实现?
前端·javascript·vue.js·经验分享·react.js·面试·vureact