快捷搜索: 王者荣耀 脱发

element-ui 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输入框的边框~

经验分享 程序员 微信小程序 职场和发展