Vue-elementui的输入框删除边框
文章目录问题描述解决方法1.页面代码2.样式代码3.实际效果问题描述在项目中我想要删除element输入框的边框,看了看网上的解决方案,用了什么!important给样式加优先级,也有使用样式穿透的,我这里使用样式穿透的方式.解决方法1.页面代码展示的表格<el-form:model="form"label-width="120px"><el-form-item label="在
·
问题描述
在项目中我想要删除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.实际效果
更多推荐
已为社区贡献5条内容
所有评论(0)