scss:修改element组件样式(el-select)

重点解析:

1.el-select组件可以分为输入框和下拉弹窗两个部分,下面会从这两个部分进行修改

2.element组件库中弹窗会加入到和#app元素同等级别的位置,相关html代码可打开浏览器检查在最下方找到,便于修改样式

实践方法:

1.输入框样式调整

//修改默认显示样式【第一part】
.el-input__wrapper{
    background-color: #013148;//默认背景色
    
    box-shadow: 0 0;//去除默认边框效果
    border: 1px solid pink;//默认边框色

    height: 30px;//默认高度
    width: 100px;//默认宽度
}
.el-input__inner{
    color: white;//默认字体颜色
}
.el-input .el-select__caret.el-icon{
    color: green;//默认图标颜色
    display: none;//默认图标不显示
}

//修改鼠标悬浮时样式【在第一part的基础上统一加上前缀.el-select:hover:not(.el-select--disabled)】
.el-select:hover:not(.el-select--disabled) .el-input__wrapper{
    background-color: #013148;//鼠标悬浮时背景色
    
    box-shadow: 0 0;//去除鼠标悬浮时边框效果
    border: 1px solid pink;//鼠标悬浮时边框色

    height: 30px;//鼠标悬浮时高度
    width: 100px;//鼠标悬浮时宽度
}
.el-select:hover:not(.el-select--disabled) .el-input__inner{
    color: white;//鼠标悬浮时字体颜色
}
.el-select:hover:not(.el-select--disabled) .el-input .el-select__caret.el-icon{
    color: green;//鼠标悬浮时图标颜色
    display: none;//鼠标悬浮时图标不显示
}

//修改鼠标点击时样式
.el-input__inner:focus{
    color: white;//鼠标选中时字体颜色
}

2.下拉弹窗样式调整

.el-select-dropdown {
    background-color: white; //默认背景色
    border: 1px solid blueviolet; //默认边框色
    height: 100px; //默认高度
}

.el-select-dropdown__item {
    color: black; //默认字体色
}

.el-select-dropdown__item.selected {
    color: white; //选中时字体色
    background-color: pink; //选中时背景色
}

.el-select-dropdown__item:hover {
    color: white; //悬浮时字体色
    background-color: pink; //悬浮时背景色
}

//隐藏滚动条
.el-select__popper .el-scrollbar__bar.is-vertical{
    width: 0;
}

// 更改滚动条样式
.el-select__popper .el-scrollbar__bar.is-vertical{
    width: 2px;//垂直滚动条修改宽度
    background-color: gray;//轨道背景色
    .el-scrollbar__thumb{
        background-color: aqua;//滚动部分背景色
    }
}
.el-select__popper .el-scrollbar__bar.is-horizontal{
    height: 2px;//水平滚动条修改高度
    background-color: gray;//轨道背景色
    .el-scrollbar__thumb{
        background-color: aqua;//滚动部分背景色
    }
}
相关推荐
别拿曾经看以后~38 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死41 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍