当前位置: 首页 > news >正文

修改输入框选择框颜色

项目场景:

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

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


问题描述

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

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

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


解决方案:

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

1:选择框:

// 输入框 、 选择框 平时的状态颜色
/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:输入框

// 输入框正常状态时边框
/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;
}

http://www.xdnf.cn/news/211177.html

相关文章:

  • jspm老年体检信息管理系统(源码+lw+部署文档+讲解),源码可白嫖!
  • 【论文阅读/复现】RT-DETR的网络结构/训练/推理/验证/导出模型
  • 如何让自己保持一定的神秘感--deepseek
  • k8s部署
  • Vim 中替换字符或文本
  • 水利三维可视化平台怎么做?快速上手的3步指南
  • CMA软件实验室评审政策解读
  • Fortran如何写注释?
  • MySQL下载与安装
  • 电子电器框架 --- 数据连接性和云集成在增强电气/电子架构方面的作用
  • Docker 容器双网卡访问物理雷达网络教程
  • 【强化学习系列】Q-learning——从贝尔曼最优方程谈起
  • IDEA专业版 Springboot连接MySQL保姆级教程 2025
  • hutools工具类中isNotEmpty与isNotBlank区分
  • 【和春笋一起学C++】函数——C++的编程模块
  • 从拒绝采样到强化学习,大语言模型推理极简新路径!
  • JDK 8 函数式接口全集
  • Electron读取本地文件
  • 客户案例分享|运营商数智化经典案例 — XX运营商
  • TRAE历史版本下载参考
  • JavaScript性能优化实战:从基础到高级的全面指南
  • 精益数据分析(32/126):电商指标优化与搜索策略解析
  • 工业声纹采集设备的市场需求趋势简析
  • 好未来golang后端开发
  • iOS - 音频: Core Audio - 播放
  • 【阿里云大模型高级工程师ACP习题集】2.7 通过微调增强模型能力 (上篇)(⭐️⭐️⭐️ 重点章节!!!)
  • 【Luogu】动态规划七
  • 3D Gaussian Splatting部分原理介绍和CUDA代码解读
  • 实验六 文件操作实验
  • 计算机视觉与深度学习 | 双目立体匹配算法理论+Opencv实践+matlab实践