Vue-elementui的输入框删除边框

文章目录

问题描述解决方法1.页面代码2.样式代码3.实际效果

问题描述

在项目中我想要删除element输入框的边框,看了看网上的解决方案,用了什么!important给样式加优先级,也有使用样式穿透的,我这里使用样式穿透的方式.

解决方法

1.页面代码

展示的表格

<el-form :model="form" label-width="120px" > <el-form-item label="在线押金/元:"> <el-input class="rule-input" type="text" readonly v-model="form.cashPledge" ></el-input> </el-form-item> </el-form>

修改的表格

<el-form :model="editForm" label-width="120px"> <el-form-item label="在线押金/元:"> <el-input type="text" class="rule-input-edit" v-model="editForm.cashPledge" ></el-input> </el-form-item> </el-form>

readonly属性用来控制不可输入,要不然清空了边框还可以输入,就不是我想要的效果 修改的表单和显示的表单用了两个,按理可以整合到一个上,我太笨了,这里用了笨方法.

2.样式代码

<style scoped lang="scss"> .rule-input ::v-deep { .el-input__inner { border: 0; } } .rule-input-edit ::v-deep { .el-input__inner { border: 0; border-radius: 0px; &:focus { border-bottom: 1px solid #409eff; } } } .el-form-item { margin-bottom: 10px; } </style>

使用了scss预处理器,可以很方便的写出input聚焦的样式 css3的穿透语法>>>在scss中不起作用,可以使用v-deep或者/deep/.

3.实际效果