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;

相关推荐
iMonster1 分钟前
React 组件的组合模式之道 (Composition Pattern)
前端
北辰alk6 分钟前
Vue 中 nextTick 的魔法:为什么它能拿到更新后的 DOM?
vue.js
呐呐呐呐呢9 分钟前
antd渐变色边框按钮
前端
Dwzun22 分钟前
基于SpringBoot+Vue的体重管理系统【附源码+文档+部署视频+讲解)
vue.js·spring boot·后端
元直数字电路验证28 分钟前
Jakarta EE Web 聊天室技术梳理
前端
wadesir31 分钟前
Nginx配置文件CPU优化(从零开始提升Web服务器性能)
服务器·前端·nginx
牧码岛32 分钟前
Web前端之canvas实现图片融合与清晰度介绍、合并
前端·javascript·css·html·web·canvas·web前端
灵犀坠33 分钟前
前端面试八股复习心得
开发语言·前端·javascript
9***Y4835 分钟前
前端动画性能优化
前端
网络点点滴36 分钟前
Vue3嵌套路由
前端·javascript·vue.js