el-select 下拉框样式的更改(备忘录)

最新推荐文章于 2024-03-18 11:32:10 发布
最新推荐文章于 2024-03-18 11:32:10 发布
阅读量383 收藏 8
点赞数 11
文章标签： 前端 vue.js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45608414/article/details/136398730
版权

1. 在项目中需要改el-select 的下拉框样式,试了很多方法

  • 1.添加类名去定位       
  • 2. ::v-deep 深度选择符

以上方法都不管用,最后在文档中看到了一个属性

试了一下果然有用

最后提一句为什么要设置padding,因为在样式初始化时 清楚了页面中所有组件的默认样式

ZHB_Sunday
关注
  • 11
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-select 下拉框多选实现全选的实现
10-16
主要介绍了el-select 下拉框多选实现全选的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue中el-form标签中的自定义el-select下拉框标签功能
10-15
主要介绍了Vue中el-form标签中的自定义el-select下拉框标签功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue中el-select下拉框的样式修改
weixin_42274795的博客
08-04 1万+
使用vue写一个搜索框包括下拉样式 在开发工具中先把div中的代码写出来 <template> <div class="searchBox"> <el-input class="input-width-select" v-model="searchText" placeholder="请输入名称搜索" clearable > <template #prepend> <el-select v-model="s
vue element修改el-select，el-date-picker组件宽度style=“width:XXpx“不生效问题的解决
2301_79406343的博客
02-27 752
关于vue element修改el-select，el-date-picker组件宽度style="width:XXpx"不生效问题的解决
(Select)解决：Element-ui 中 Select 选择器下拉框样式及输入框样式的修改问题(背景色透明与悬停背景色变化与下拉框边距变化等操作)
狮子座的男孩
05-05 2万+
Ⅰ、Element-ui 提供的组件与想要目标对比： 1、Element-ui 提供组件情况： 2、想要修改后的目标： Ⅱ、Ⅲ、ⅣⅤ1、目标：
element-ui中下拉框样式修改
weixin_47803327的博客
10-31 1520
element-ui中下拉框样式修改
Element-ui el-select 选择器(下拉框) 修改样式
m0_56471534的博客
07-17 3995
表格里引入el-select，根据需求修改下拉框样式。
element-ui下拉框自定义样式
最新发布
qq_51586463的博客
03-18 776
自定义下拉选项框样式,里面的样式自定修改
el-select如何改变样式 （:popper-append-to-body=“false“）
Alone_Endeavor的博客
06-01 5956
popper-append-to-body是一个Popper.js库的选项，用于指定Popper元素是否应该附加到文档的body元素上。通过Element-ui的Select Attributes可发现，有这样一个属性 popper-append-to-body。在使用el-select的时候，其样式会按照Elementui自带的默认样式为基准；.el-select-dropdown__item:hover——hover时的样式。.el-select-dropdown__item——单个选项的样式修改。
el-select 替换右侧icon
north_katydid的博客
06-09 1268
在el-selent基础上修改右侧小图标，以及鼠标滑上input框 ，背景、边框颜色变更
ElementUI，修改el-select下拉框的样式
anqiaoyun的博客
12-18 1147
ElementUI，修改el-select下拉框的样式
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
主要介绍了Vue + Element-ui的下拉框el-select获取额外参数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【element-plus使用】el-select自定义样式、下拉框选项过长等问题解决
记录
11-29 6773
参考代码：选项的超出部分就会变成...。如果要自定义下拉框的宽度，则可以参考如下代码实现<el-option<style></style>选项的超出部分就会变成...。参考（里面还有种方法是用横向滚动条，但感觉用户体验会不太好,pass）补充：如果不希望选项超出部分变成…，直接都完整展示每个选项。可以参考下面的写法：（我还没试过；是群里uu提供的）
element中el-select下拉框整体样式修改
我是段段的博客
01-14 1万+
前言 最近写项目的时候，需要对element中原有的下拉框组件进行整体样式的修改，修改完后简单记录一下 原有组件里的el-select下拉框 这是修改完成之后的样式 页面的DOM元素也是直接使用组件中的例子 <template> <div class="wrap"> <div class="dark-select"> 　　<el-select v-model="value" placeholder="请选择" :popper-append-t
el-select下拉框选项的样式修改(背景色、hover、字体等)
热门推荐
爱代码的小海的博客
05-15 5万+
一：如何修改el-select下拉框中选项的样式，网上的方法一般有两种： 1.找到下拉框的类名，写一个全局的样式。 2.通过/deep/来修改.el-select-dropdown__item的样式内容 3.通过popper-class设置的类名添加样式 以上几种方式中，第二种和第三种是无法生效的，而第一种形式虽然可以，但是会造成样式污染，在打包上传到服务器的时候，其他地方的样式可能会因此发生改变。 二：问题分析 上图中显示的是当选中el-select的选项时页面的结构，选项的容器并不在挂载的div#ap
element下拉框背景/选中/鼠标移入样式设置
Xiang_Gong_Ya_的博客
12-19 636
/ 这个有效background;color;border;
element-plus修改el-select下拉框的位置
qq_43651168的博客
05-16 3597
element-plus修改el-select下拉框位置
el-select 下拉框样式
09-10
要修改el-select下拉框中选项的样式，可以使用以下几种方法： 1. 全局样式：找到下拉框的类名，并编写一个全局的样式来修改。这种方法可以通过在样式文件中直接修改或者使用scoped属性来限定作用域。 2. 使用/deep/：通过使用/deep/来修改.el-select-dropdown__item的样式内容。这个方法可以通过在样式文件中使用/deep/关键字来穿透组件的样式隔离，从而修改下拉框选项的样式。 3. 使用popper-class：通过设置popper-class属性来添加自定义的类名，并在样式文件中定义该类名的样式。这个方法可以实现更精确的样式修改。 示例代码如下，可以根据需要修改样式： ``` 1. 全局样式： .el-select-dropdown__item { /* 修改样式 */ } 2. 使用/deep/： /deep/ .el-select-dropdown__item { /* 修改样式 */ } 3. 使用popper-class： .el-select-dropdown__item.custom-style { /* 修改样式 */ } ``` 引用提供了修改el-select下拉框选项样式的三种方法，可以根据具体需求选择相应的方法来修改下拉框的样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值