修改vue项目中 elementUI input边框样式

需要去掉input边框。

直接在含有 scoped属性的style中修改,是不起作用的。在一个不含scoped属性中

解决方案一:

在开发过程中遇到需要去掉 el-input的边框,使其满足ui要求,element-ui官网的el-input的样子如下:
在这里插入图片描述
但是我需要的是下面这种没有边框的效果:
在这里插入图片描述
不可行做法
例如这样一段代码来设置

<div class="inputDemo">
    <el-input></el-input>
</div>

通过实践,border: none; 或者 border: 0; 都行不通,即以下方法并不可行:

通过选择 el-input

.inputDemo el-input{
    border: none;
}
.inputDemo el-input{
    border: 0;
}

通过选择 input

.inputDemo input{
    border: none;
}
.inputDemo input{
    border: 0;
}

以上方法中,通过选中 .el-input__inner也不可行

在el-input组件中,是通过 .el-input__inner来设置边框的
在这里插入图片描述
解决办法
>>> 是vue的深度选择器,vue引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过 >>> ,穿透scoped。

无任何依赖时,纯css写 >>> 是无效果哒

写法请遵循:父级>>>el-input

就以这个例子:

<div class="inputDeep">
    <el-input></el-input>
</div>

CSS实现

  /* 利用穿透,设置input边框隐藏 */
  .inputDeep>>>.el-input__inner {
    border: 0;
  }
  /* 如果你的 el-input type 设置成textarea ,就要用这个了 */
  .inputDeep>>>.el-textarea__inner {
    border: 0;
    resize: none;/* 这个是去掉 textarea 下面拉伸的那个标志,如下图 */
  }

在这里插入图片描述

解决方案二:

html:
在这里插入图片描述
css:
在这里插入图片描述

  • 6
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值