当placeholder的字体大小跟input大小不一致，placeholder垂直居中

时间 2019-12-16

标签 placeholder 字体大小 input 不一致垂直居中繁體版

原文原文链接

当placeholder的字体大小跟input大小不一致，实现placeholder垂直居中web

设计稿的placeholder的样式是这样的字体

输入值的时候大小是这样的spa

最后想要实现的效果是这样的设计

当我这样写的时候code

input::-webkit-input-placeholder{
  color: #D9D9D9;
  font-size: 36px;
}

效果是这样的，会稍微偏低一点orm

后面我加了一个translate,就能够实现垂直居中blog

input::-webkit-input-placeholder{
  color: #D9D9D9;
  font-size: 36px;
  transform: translate(0, -10px);
}