ElementUI,修改el-select下拉框的样式

  1. 在使用到el-select组件中设置:popper-append-to-body="false"
xml 复制代码
<el-select
    v-model="value"
    :popper-append-to-body="false"
    placeholder="请选择"
>
	  <el-option
	      v-for="item in options"
	      :key="item.value"
	      :label="item.label"
	      :value="item.value">
	  </el-option>
</el-select>
  1. 修改样式
xml 复制代码
<style lang="scss" scoped>
//修改的是el-input的样式

//一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色

//另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色

::v-deep .el-select,
::v-deep .el-input,
::v-deep .el-input__inner{
  border-radius: 10px;
  color:#fff;
  //border: 1px solid green;
  border-radius:0px;
  border-color:green;
  text-align: center;
}

//el-input聚焦的时候 外层的border会有一个样式
::v-deep .el-select .el-input.is-focus .el-input__inner{
  //border:0px;
  border: 1px solid green;
}

//修改的是el-input上下的小图标的颜色

::v-deep .el-select .el-input .el-select__caret{
  color: green;

}

//修改总体选项的样式 最外层

::v-deep .el-select-dropdown{
  //rgba(87,133,87,0.8)
  background: rgba(87, 133, 87, 0.78);
  //margin: 0px;
  border:0px;
  //border-radius: 0px;
  //left: 0px !important;

}

//修改单个的选项的样式

::v-deep .el-select-dropdown__item{
  background-color: transparent;
  color:#fff;
}

//item选项的hover样式

::v-deep .el-select-dropdown__item.hover,

::v-deep .el-select-dropdown__item:hover{
  color: rgb(21, 94, 38);
  background: rgba(87, 133, 87, 0.3);
}

//修改的是下拉框选项内容上方的尖角
::v-deep .el-popper .popper__arrow, .el-popper .popper__arrow::after{
  display: none;
}
</style>
  1. 效果

参考:

https://blog.csdn.net/qq_26695613/article/details/127870263

https://blog.csdn.net/Alone_Endeavor/article/details/130986687

相关推荐
curdcv_po9 分钟前
甲方嫌弃,项目首页加载太慢
前端
刘同学有点忙11 分钟前
技术升级中的"幽灵Bug"排查:从message失效看架构迁移的隐性成本
前端
怪大叔952712 分钟前
vue组件之远程组件
前端·javascript·vue.js
邢同学爱折腾13 分钟前
长安的荔枝小说阅读器——程序员的浪漫与效率
前端·javascript
墨夏15 分钟前
Tauri + NextJS 扫码登录
android·前端·ios
天生我材必有用_吴用16 分钟前
Three.js开发必备:灯光详解附带案例
前端
Hilaku34 分钟前
用好了 watchEffect 才算会用 Vue3 —— 那些让人误解的响应式陷阱
前端·javascript·vue.js
GISer_Jing39 分钟前
Zustand 状态管理库:极简而强大的解决方案
前端·javascript·react.js
zacksleo39 分钟前
鸿蒙Flutter实战:25-混合开发详解-5-跳转Flutter页面
前端·flutter·harmonyos
zacksleo1 小时前
鸿蒙Flutter实战:23-混合开发详解-3-源码模式引入
前端·flutter·harmonyos