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;

相关推荐
xiaopengbc13 分钟前
在Webpack中,如何在不同环境中使用不同的API地址?
前端·webpack·node.js
前端AK君17 分钟前
React中台系统如何嵌入到业务系统中
前端
Slice_cy19 分钟前
不定高虚拟列表
前端
m0_7484613926 分钟前
Spring Boot + Vue 项目中使用 Redis 分布式锁案例
vue.js·spring boot·redis
前端AK君28 分钟前
React组件库如何在vue项目中使用
前端
Moonbit38 分钟前
MoonBit 再次走进清华:张宏波受邀参加「思源计划」与「程序设计训练课」
前端·后端·编程语言
RestCloud40 分钟前
一站式数据集成:iPaaS 如何让开发者和业务人员都满意?
前端·后端·架构
li35741 小时前
React 核心 Hook 与冷门技巧:useReducer、useEffect、useRef 及 is 属性全解析
前端·javascript·react.js
菜市口的跳脚长颌1 小时前
Web3 基础
前端
快乐是Happy1 小时前
分享一个非常实用的防止重复提交操作
前端·javascript