上头设计了一个没有边框之后一个竖线焦点的输入框,但是我又想使用iview组件,所以只能自己动手定制iview组件了
代码
html
<i-input class="txtput" :maxlength="20" v-model="meetingDate.meetingTitle" placeholder="请输入..." ></i-input>
css
穿透进iview的input框
/* 穿透进iview的input框 */ .txtput >>> .ivu-input{ width: 85%; border: none; outline:none; font-size: 20px; margin-left: 0%; border-bottom: 1.3px solid gainsboro; }
去除点击之后的input框
/* 去除点击之后的input框 */ .txtput >>> .ivu-input:focus{ outline:none; border:none; box-shadow: 0 0 0 2px transparent; border-bottom: 1.3px solid gainsboro; }
效果
点击之后的效果
成功