当需求中遇到input输入框字体与placeholder字体大小不一致时,会产生字体无法垂直居中的问题。
代码如下:
input{
width: 180px;
height: 40px;
line-height: 40px;
font-size: 18px;
}
input::placeholder{
font-size: 12px;
}
效果如下:
若想解决该问题,只需:
input::placeholder{
font-size: 12px;
position: relative;
top: -2px;
}
此时效果为: