如果不需要显示下边框,纯无边框直接将 【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>

Logo

中国智能体开发者社区,聚焦智能体与大模型开发,提供前沿资讯、实用工具链、开源项目及行业案例。通过技术沙龙、开发者大赛等活动,促进经验交流与协作,助力开发者快速构建创新智能应用。

更多推荐