placeholder设置行高无效

329 阅读1分钟

29cb72788d4dd80f636055b9e0c2ad7.png

大佬们,最近遇到一个坑,input, testarea,这俩输入框,placeholde设置颜色和字号可以,但是设置行高有时候不生效。 (解决方案直接看方案二)

当输入框的字号为80px,placeholder的字号为30px时,placeholder的位置太靠下了,这个就很丑了。

input::-webkit-input-placeholder {
color: red;
font-size: 22px;
line-height: 96px; } 当时想了两个方案 1我们这里使用vant的数字键盘,可以不用input,也能实现输入功能,直接写四个div,用定位的方式实现input,实现光标,实现placeholder,

image.png 这个方案有个问题,需要自己计算光标的位置,这个自己算的不太准,出现了下面这种情况,数字1的宽度和234567890的不一样,输入的1多了光标离的就会很远。还有不能随便移动光标的位置。

image.png 所以方案1上线了一个月就扑街了。

下面方案二,自己写一个placeholder,定位到input框的正上方。监听用户输入了没有,如果输入了,就隐藏placehoder,还用input自己的光标。

image.png 方案二效果图,个人觉得还行

image.png