element el-input 删除边框的实现

更新时间：2023年04月28日 10:14:29 作者：今天上上签

本文主要介绍了element el-input 删除边框的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

我们在使用element ui的 el-input输入框时，会面临这样的问题：
官网的样式：

而我们需要的：

我们正常的操作是：但发现行不通…

style="border: 0px;"

然后经过查找资料，发现可以用” >>>“，这是vue的深度选择器，vue引用了第三方组件，需要在组件中局部修改第三方组件的样式；所以我们更改代码：

<div class="inputDeep">
	<el-input size="medium " value="工况结束时间"></el-input>
 </div>
<style>
.inputDeep >>> .el-input__inner {
  border: 0px;
  box-shadow: 0 0 0 0px;
}
</style>

但是发现并没有效果，原因是我们要在<style>标签内加上scoped属性才能生效

<style scoped>
.inputDeep >>> .el-input__inner {
  border: 0px;
  box-shadow: 0 0 0 0px;
}
</style>

另外，有些Sass 之类的预处理器无法正确解析 >>>，可以使用 /deep/ 操作符( >>> 的别名)，如下：

<style scoped>
.inputDeep /deep/.el-input__inner {
  border: 0px;
  box-shadow: 0 0 0 0px;
}
</style>

可以顺利的去掉input输入框的边框~

到此这篇关于element el-input 删除边框的实现的文章就介绍到这了,更多相关element el-input 删除边框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

js无痛刷新Token的实现
本文主要介绍了js无痛刷新Token的实现，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
Array.prototype.slice.apply的使用方法
arguments在JavaScript语法中是函数特有的一个对象属性(Arguments对象)，用来引用调用该函数时传递的实际参数。
2010-03-03
微信小程序tabBar底部导航中文注解api详解
这篇文章主要为大家详细介绍了微信小程序tabBar底部导航中文注解api，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
setInterval计时器不准的问题解决方法
在js中如果打算使用setInterval进行倒数,计时等功能，往往是不准确的，针对这个问题，本文有个不错的解决方案
2014-05-05
Bootstrap基本组件学习笔记之缩略图(13)
这篇文章主要为大家详细介绍了Bootstrap基本组件学习笔记之缩略图,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
IE6图片加载的一个BUG解决方法
小图整合在一张大图里，然后在不同的CSS里调用同一张图片，以此来减少请求数，这是页面优化最常用的手段，但IE6会对页面里同一个图片，只要在不同的地方有引用到就会重新请求一次，需要加JS代码解决。
2010-07-07
CodeReview常见的几个问题梳理解决示例
这篇文章主要为大家介绍了CodeReview常见的几个问题梳理解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
简单实现jquery焦点图
这篇文章主要为大家详细介绍了如何简单实现jquery焦点图效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
使用js和canvas实现时钟效果
这篇文章主要为大家详细介绍了使用js和canvas实现时钟效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
uniapp中获取dom元素的方法及更改dom元素颜色踩坑记录
最近学到了一个比较好用的框架uni-app,可以做六端适配,学习一下,下面这篇文章主要给大家介绍了关于uniapp中获取dom元素的方法及更改dom元素颜色踩坑记录的相关资料,需要的朋友可以参考下
2023-03-03