- 升级后的
el-select
组件的类跟之前的不一样了,之前的是.el-input__wrapper
类来改外观大小和边框样式的,现在升级后变为.el-select__wrapper
。
//修改高度和圆角
:deep(.el-select__wrapper) {
min-height: 40px;
border-radius: 8px;
padding: 0px 16px 0px 20px;
}
//修改鼠标悬停边框颜色
:deep(.el-select__wrapper:hover) {
box-shadow: 0 0 0 1px #1890ff inset !important;
}
//修改鼠标触发等边框颜色
::deep(.el-select__wrapper.is-focus) {
box-shadow: 0 0 0 1px #1890ff inset !important;
}
:deep(.el-select__wrapper.is-focused) {
box-shadow: 0 0 0 1px #1890ff inset !important;
}
:deep(.el-select .is-focus .el-select__wrapper) {
box-shadow: 0 0 0 1px #1890ff inset !important;
}
:deep(.el-select .el-select__caret) {
color: #898989;
}
:deep(.el-tag) {
background: #fcfcfc;
border: 1px solid rgba(134, 134, 134, 0.56);
border-radius: 8px;
}
:deep(.el-select__wrapper:focus) {
box-shadow: 0 0 0 1px #1890ff inset !important;
}
:deep(.el-tag.el-tag--info) {
background: #fcfcfc;
border: 1px solid rgba(134, 134, 134, 0.56);
border-radius: 8px;
font-size: 14px;
color: #333333;
}
//修改选中文字颜色
:deep(.el-select__placeholder) {
color: #333333;
}
:deep(.el-checkbox__inner::after) {
top: -10px !important;
}
:deep(.el-select-tags-wrapper.has-prefix) {
margin-left: 20px !important;
}
//鼠标离开后颜色
.el-select-dropdown__item.is-hovering {
background-color: #1890ff;
}