Vue3中Element-Plus中el-input及el-select 边框样式

如果不需要显示下边框，纯无边框直接将 【border-bottom: 1px solid #C0C4CC; 】注掉或去掉即可。
正常引用组件使用即可，无须自定义样式，最终效果CSS样式。

<style scoped>
/* 输入框的样式 */
:deep(.el-input__wrapper) {
  box-shadow: none !important; /* 去掉阴影 */
  border-radius: 0; /* 去掉圆角 */
  border-bottom: 1px solid #C0C4CC; /* 默认下边框颜色 */
}

/* 选择框的样式 */
:deep(.el-select__wrapper) {
  box-shadow: none !important; /* 去掉阴影 */
  border-radius: 0; /* 去掉圆角 */
  border-bottom: 1px solid #C0C4CC; /* 默认下边框颜色 */
}

/* 鼠标悬停时的样式 */
:deep(.el-input__wrapper:hover) {
  border-bottom: 1px solid var(--el-color-primary); /* 鼠标悬停时下边框高亮 */
}

:deep(.el-select__wrapper:hover) {
  border-bottom: 1px solid var(--el-color-primary) !important; /* 鼠标悬停时下边框高亮 */
}

/* 聚焦时的样式 */
:deep(.el-input__wrapper:focus) {
  border-bottom: 1px solid var(--el-color-primary); /* 聚焦时下边框颜色 */
}

:deep(.el-select__wrapper:focus) {
  border-bottom: 1px solid var(--el-color-primary); /* 聚焦时下边框颜色 */
}
</style>