去除el-input四周白边

正气*凛然

已于 2022-05-19 10:27:52 修改

阅读量688

点赞数 2

文章标签： css

于 2022-03-07 17:51:19 首次发布

本文链接：https://blog.csdn.net/maJieweb/article/details/123335814

版权

这篇博客主要介绍了如何通过CSS深入定制el-input组件，特别是如何去掉其周围的白色边框。作者使用了`:deep()`选择器，并通过设置`box-shadow`为`none`来移除默认的白边效果。在输入框获取焦点时，通过`&:focus`恢复了原有的内阴影，确保了用户体验。文章并未提及`focus-within`选择器的使用。

摘要由CSDN通过智能技术生成

去除el-input四周白边（注意那不是边框）

:deep(.el-input) {
	input{
		box-shadow: none;//去除白边
		&:focus {
          box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset;//输入内容原本样式
        }
	}
}