首页 > itarticle > 输入框实现多行下划线方法

输入框实现多行下划线方法

admin 11月 11, 2020 0

实现思路:主要是利用背景图片的方式来模拟下划线，比如设置line-height=16px;这个时候配合设计做一张png图，图的高度即line-height的高度。只有下面1px的线，其它是透明，设置背景为可以重复，这样就可以达到多行下划线的效果了。如下

<p contenteditable="true"></p>//加属性使得文本可编辑
.multipleChoice p{
       width: 88%;
       overflow: hidden;
       float: left;
       height: 100%;
       border: none;
       outline: none;
       line-height: 1.5rem;
       background-image: url(../../image/decorationLine.png);
   }