Element-plus 【el-input输入框】和【el-select下拉选择框】样式修改

el-input & el-select

参考链接:

【1】【浏览器】f12控制台,如何选中click、hover才出现的元素(断点调试)_f12跟踪click-CSDN博客

【2】

Element-plus的el-input改边框focus后颜色_element input框 出发焦点改变边框颜色-CSDN博客

【3】

【Element-plus】修改el-input、el-select的样式(代码+教程)_elementplus中select和tree中的ishovering的样式-CSDN博客

首先根据参考链接1的方法,通过打断点,可以找到el-select选中元素的样式是由:

css 复制代码
el-select-dropdown__item.is-selected

控制的,

因此在代码中这样修改:[这样修改所有的下拉框的选中选项颜色都会变成红色]

css 复制代码
<style lang="scss" scoped>
.el-select-dropdown__item.is-selected{
    color:red !important;
    font-weight:bold;
}
</style>

el-input样式的修改可以参考链接2;

相关推荐
bearpping6 小时前
Nginx 配置:alias 和 root 的区别
前端·javascript·nginx
@大迁世界7 小时前
07.React 中的 createRoot 方法是什么?它具体如何运作?
前端·javascript·react.js·前端框架·ecmascript
January12077 小时前
VBen Admin Select 选择框选中后仍然显示校验错误提示的解决方案
前端·vben
. . . . .7 小时前
前端测试框架:Vitest
前端
xiaotao1317 小时前
什么是 Tailwind CSS
前端·css·css3
颜酱8 小时前
DFS 岛屿系列题全解析
javascript·后端·算法
战南诚8 小时前
VUE中,keep-alive组件与钩子函数的生命周期
前端·vue.js
发现一只大呆瓜8 小时前
React-彻底搞懂 Redux:从单向数据流到 useReducer 的终极抉择
前端·react.js·面试
霍理迪9 小时前
Vue的响应式和生命周期
前端·javascript·vue.js