Element Plus中select选择器样式修改问题_el-select圆角

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样式要使用

:deep(选择器:hover)