(Select)解决:Element-ui 中 Select 选择器下拉框样式及输入框样式的修改问题(背景色透明与悬停背景色变化与下拉框边距变化等操作)
Ⅰ、Element-ui
提供的组件与想要目标情况的对比:
1、Element-ui
提供组件情况:
其一、Element-ui
自提供的代码情况为(示例的代码):
// Element-ui 自提供的代码:
<template><el-select v-model="value" placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select>
</template><script>export default {data() {return {options: [{value: '选项1',label: '黄金糕'}, {value: '选项2',label: '双皮奶'}, {value: '选项3',label: '蚵仔煎'}, {value: '选项4',label: '龙须面'}, {value: '选项5',label: '北京烤鸭'}],value: ''}}}
</script>
代码地址:https://element.eleme.cn/#/zh-CN/component/select
其二、页面的显示情况为:
A、el-select
输入栏的情况展示:
B、el-select
下拉框的背景情况展示:
C、el-select
下拉框的悬停情况展示(即:默认悬停时的字体背景颜色为灰色):
2、目标修改后的情况:
A、el-select
输入栏的情况展示(即:输入栏的长度设置及背景颜色设置):
B、el-select
下拉框的背景情况展示(即:下拉框的背景颜色,样式等的修改):
C、el-select
下拉框的悬停情况展示(即:修改默认的悬停颜色):
Ⅱ、实现 Select 选择器下拉框样式及输入框样式变化的过程:
1、输入框样式的修改:
其一、代码:
<style lang="scss" scoped>// 设置输入框的长度为:102px;
/deep/.el-input--suffix .el-input__inner {padding-right: 102px;
}// 设置输入框的背景色、字体颜色、边框属性设置;
/deep/.el-input__inner {background-color: #003e00;color: #fff;border: 1px solid #e43179;
}
</style>
其二、效果展示:
A、输入框的效果展示(即:可以设置成想要背景与边框的效果):
B、下拉框的效果展示:
2、下拉框样式的修改:
其一、代码:
// 注意:此时一定要在 <el-select> 里添加 :popper-append-to-body="false" 属性;
// 若未加入 :popper-append-to-body="false" 属性,那么此时渲染后的 DOM 元素不在 #app 元素内部;
// 原因: el-select 里面的 select-popper 元素渲染后会脱离 #app ,因此使用深度选择器也无法定位该元素;<style lang="scss" scoped>// 设置下拉框的背景颜色及边框属性;
/deep/.el-select-dropdown {// 若不将下拉框的背景颜色设置为:transparent,那么做不出来半透明的效果;// 因为其最终的显示为:下拉框有一个背景颜色且下拉框的字体有一个背景颜色,重叠后的效果展示;background-color: transparent;border: 1px solid blue;
}// 设置下拉框的字体属性及背景颜色;
.el-select-dropdown__item {font-size: 7px;line-height: 19px;color: #fff;font-weight: 200;background-color: #003e00;
}// 设置下拉框列表的 padding 值为:0;(即:样式调整)
/deep/.el-select-dropdown__list {padding: 0;
}// 设置输入框与下拉框的距离为:0; (即:样式调整)
/deep/.el-popper[x-placement^="bottom"] {margin-top: 0px;
}// 将下拉框上的小箭头取消;(看着像一个箭头,其实是两个重叠在一起的箭头)
/deep/.el-popper .popper__arrow,
/deep/.el-popper .popper__arrow::after {display: none;
}// 设置鼠标悬停在下拉框列表的悬停色;
.el-select-dropdown__item:hover {background-color: rgba(0, 225, 219, 0.690196078431373);
}
</style>
其二、效果展示:
A、输入框的效果展示:
B、下拉框的效果展示:
3、整个代码的页面展示效果为:
其一、输入框的效果展示:
其二、下拉框的效果展示:
Ⅲ、修改 Select
选择器下拉框及输入框达到目标效果的过程:
1、整体的代码:
<template><div><el-row type="flex" justify="end"><el-col :span="6"><el-selectv-model="value":popper-append-to-body="false"placeholder="请选择"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option> </el-select></el-col></el-row></div>
</template><script>
export default {data() {return {options: [{value: "选项1",label: "黄金糕",},{value: "选项2",label: "双皮奶",},{value: "选项3",label: "蚵仔煎",},{value: "选项4",label: "龙须面",},{value: "选项5",label: "北京烤鸭",},],value: "",};},
};
</script><style lang="scss" scoped>
/deep/.el-input--suffix .el-input__inner {padding-right: 102px;
}
/deep/.el-input__inner {background-color: #00083e;color: #fff;border: 1px solid #31cae4;
}.el-select-dropdown__item {font-size: 7px;line-height: 19px;color: #fff;font-weight: 200;background-color: #00083e;
}
/deep/.el-select-dropdown {background-color: transparent;border: 1px solid blue;
}
/deep/.el-select-dropdown__list {padding: 0;
}
/deep/.el-popper[x-placement^="bottom"] {margin-top: 0px;
}
/deep/.el-popper .popper__arrow,
/deep/.el-popper .popper__arrow::after {display: none;
}
.el-select-dropdown__item:hover {background-color: rgba(0, 225, 219, 0.690196078431373);
}
</style>
2、效果展示:
Ⅳ、小结:
其一、哪里有不对或不合适的地方,还请大佬们多多指点和交流!
其二、有兴趣的话,可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏):https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482
(Select)解决:Element-ui 中 Select 选择器下拉框样式及输入框样式的修改问题(背景色透明与悬停背景色变化与下拉框边距变化等操作)相关推荐
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
- element ui中select 下拉框在火狐浏览器最后一行显示不完全(谷歌正常)
在项目开发的时候用到了el-scrollbar组件 并且设置了隐藏横向滚动条 下面展示一些 内联代码片. // 隐藏横向滚动条 .el-scrollbar__wrap {overflow-x: hid ...
- element ui中select 下拉选择文字输入筛选
未修改代码前效果 选择框中不可编辑 如图:加入 filterable allow-create default-first-option 代码如下 <template><div> ...
- element ui 中级联选择器,点击完下拉框收回
在el-cascader标签中添加ref属性,$refs中添加toggleDropDownVisible()方法
- VUE ELEMENT UI 清空select 下拉选项
VUE ELEMENT UI 清空select 下拉选项 1.select代码 <el-form ref="searchForm" :inline="true&qu ...
- element ui中的el-dropdown(下拉框)防止点一下就隐藏的问题
element ui中的el-dropdown(下拉框)防止点一下就影藏的问题 当使用el-dropdown下拉框时,下拉框的每项中,可能需要加入@click.@change或复选框等事件,而el-d ...
- 将Element UI的时间选择器(DatePicker)的Sat Jan 01 2022 00:00:00 GMT+0800 (中国标准时间)转化为XXXX-XX-XX的格式
将Sat Jan 01 2022 00:00:00 GMT+0800 (中国标准时间)转化为XXXX-XX-XX的格式 在使用element UI的时间选择器时,控制台输出的是Sat Jan 01 2 ...
- Web前端笔记-修改element ui中表格样式(透明、去横纵线等含修改思路)
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
- Element UI中Steps 步骤条description描述换行展示
突然要求加了个显示字段,之前的代码只能显示一行,于是乎找到了解决办法,代码如下:其中的属性自行到官网查看释义吧:Element UI官网传送门 <el-table><!-- 可展开的 ...
- element ui DatePicker 日期选择器 限制只能选择今天之前或者之后--选择范围时选中第一个后前面的日期应该是禁止状态
picker-options的值是一个对象,他的disabledDate属性可以设置禁用日期 time.getTime是把选中的时间转化成自1970年1月1日 00:00:00 UTC到当前时间的毫秒 ...
最新文章
- 阿里云OSS图片上传类
- java JUC线程池:Executors.newSingleThreadExecutor代码示例
- react核心虚拟dom_使用虚拟时间测试基于时间的React堆核心流
- (JAVA)正则表达式
- go-elasticsearch: Elastic官方的Go语言客户端
- 基于JAVA+SpringMVC+Mybatis+MYSQL的房屋租赁系统
- CentOS 6.5 安装 Redis 执行 make #error Newer version of jemalloc required
- verilog设计一个补码加减法运算器_一文搞懂:计算机中为什么用补码来存储数据?...
- 超级详解 银行支付系统大小额(一代支付)、超级网银(二代支付)
- java socket.close_java – Socket.close()在Socket.connect()期间无效
- RAR和RAR4和zip那个压缩率最高
- Linux操作命令分类详解 - 压缩备份(四)
- C语言定义结构体的几种方法
- 金蝶K3修改库存更新控制方式
- Java负整数的左移、右移、无符号右移
- 知识普及:KB=Kb?
- 如何优化小红书笔记?教你三个小技巧,让你快速提高笔记排名
- 基于JAVA教室实验室预约系统设计与实现 开题报告
- 【跨境电商平台规则与合规研讨会】在跨境驿站顺利召开
- html语言中空行标记,HTML代码中的空格和空行的实例操作
热门文章
- centos7.2下搭建postfix++dovecot+courier-authlib+extmail邮件收发系统
- python dicom 三维重建_DICOM HTML5 Viewer中的真三维重建
- 25个很酷的jQuery倒计时脚本–添加动态计数器!
- 蓝牙耳机连接macbook无声音
- 公众号开发:实现一键复制功能
- 医院预约挂号系统 ssm
- 实现Android手机屏幕投影到电脑进行演示
- 计算机应用结课PPT,计算机应用说课.ppt
- 使用SEGGER Jlink下载hex文件
- 1stopt拟合步骤_1stopt快速公式拟合