前言

在开发中有时需要给某些下拉框选项设置特定的样式，如字体大小，字体颜色，间距等。

一、ElementUI文档

为了实现给特定下拉框设置样式的效果，需要关注el-select中的两个参数：popper-class和popper-append-to-body，可以设置下拉框的类名，即popper-class，并将popper-append-to-body设置为false，否则的话渲染后的 DOM 元素将不在 #app 元素内部。

二、代码实现

1.el-select选择器

代码如下（示例）：

<el-select v-model="labelno" :popper-append-to-body="false" filterable :popper-class="'labelOption'" placeholder="请选择"><el-optionv-for="item in optionsList":key="item.key":label="item.value":value="item.key"></el-option></el-select>

2.设置样式

代码如下（设置字体大小）：

<style>.labelOption .el-select-dropdown__item {font-size: 10px;}
</style>

拓展阅读

ElementUI文档：Element - The world's most popular Vue UI framework

VUE学习（二）：修改下拉框样式相关推荐

element-UI el-select 简单修改下拉框样式
el-select原先的下拉框最大高度小,垂直滚动条太窄,想修改样式,覆盖掉原先的样式没改样式前改样式后主要代码如下: <!-- 页面 -- ...
html 修改下拉框样式,select下拉框option的样式修改
select原样式: 进行样式修改后的样式: 附上修改代码: //select外面必须包裹一个div,用来覆盖select原有的样式筛选实验类型实验1 实验2 css: .option{ /*用d ...
修改elmentui中el-date-picker下拉框样式(大小)
最近项目里面有一个组件需要用到日期选择器,且这个组件中的日期选择器需要比默认的大小(width:320px)要小一些.于是我准备打开控制台审查元素修改样式. 但是大家可以从下面的图片看到,这个下拉框的 ...
html select 样式t调整_css修改html select下拉框样式(含右边箭头)
css修改html select下拉框样式(含右边箭头)2017-10-12 16:51 我们经常会看到一些页用用的select下拉框非常漂亮,其实很多是用插件实现的. 如果不使用插件,靠纯css能不 ...
vue3—elementPlus如何单独修改页面中的下拉框样式
vue3中只能去修改popper-class这个属性去修改 (自己想要的样式)重点 :样式修改不能写在scoped中,可以单独开个style popper-class="blueBack&q ...
css修改layui的下拉框样式 js_layui创建表单下拉框样式不显示
border-left: 5px solid #009688; 注释:solid实体,实心样式: Blockquote:块引用;Fieldset:字段集; 1.所有浏览器都支持标签. fieldse ...
vue在列表和下拉框中显示icon图标
vue在列表和下拉框中显示icon图标一. 在项目中引入阿里云icon图标二. 在data中定义icon图标列表三. 在下拉框中显示icon图标四. 在列表中显示icon图标五. 在el-c ...
【基于vue写的select下拉框】
一个基于vue写的select下拉框 <template><div class="selectCompents"><div class="s ...
HTML下拉框样式美化
在网页中,下拉框的样式最难美化,默认样式巨丑,好在现在已经有各种框架实现了下拉框的样式美化,主要思路都是通过JS代码将下拉框元素用更容易设置样式的div进行替换,再将对应选项及事件进行关联. 最近一项 ...
ElementUI:多个Select下拉框存在时调整个别下拉框样式
当dialog中存在多个下拉框的时候,想改变某一个下拉框的样式,于是给某一个select绑定类,发现并没有生效,换了一种方法,将el-select用div包裹,将类绑定在div上,也没有效果. 在控制 ...

VUE学习（二）：修改下拉框样式

前言