Element Plus中select选择器样式修改问题

最新推荐文章于 2024-01-23 11:30:07 发布

Igiveufireworks

最新推荐文章于 2024-01-23 11:30:07 发布

阅读量3.2k

点赞数 5

文章标签： vue.js javascript 前端 elementui

本文链接：https://blog.csdn.net/Igiveufireworks/article/details/127050094

版权

1. 使用el-select后效果为：

2. 需要的效果：

3. 实现过程

设置背景色透明、把组件自带的边框圆角、box-shadow去除：

:deep(.el-input__wrapper) {
  background-color: transparent;
  border-radius: 0px;
  box-shadow: 0 0 0 0;
  width: 152px;
  padding: 0;
}

设置宽高、字号等：

:deep(.el-input__inner) {
  padding-left: 32px;
  height: 52px;
  line-height: 52px;
  font-size: 17px;
  color: #fff;
}
:deep(.el-input__suffix) {
  padding-right: 15px;
}

效果：，

但是鼠标悬浮和点击选择后仍然有边框

，去除边框：

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 0 !important;
}
:deep(.el-select .el-input.is-focus .el-input__wrapper) {
  box-shadow: 0 0 0 0 !important;
}
:deep(.el-select .el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 0 !important;
}

注意：使用deep的情况下修改hover样式要使用