【vue】iview如何把input输入框和点击输入框之后的边框去掉
上头设计了一个没有边框之后一个竖线焦点的输入框,但是我又想使用iview组件,所以只能自己动手定制iview组件了代码html<i-input class="txtput" :maxlength="20" v-model="meetingDate.meetingTitle" placeholder="请输入..." ></i-input>css穿透进iview...
·
上头设计了一个没有边框之后一个竖线焦点的输入框,但是我又想使用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;
}
效果
点击之后的效果
成功
更多推荐
所有评论(0)