保持占位符增加字体大小并垂直居中答案

【问题标题】：keep the placeholder with increasing font size and on center vertically保持占位符增加字体大小并垂直居中
【发布时间】：2018-10-30 20:41:53
【问题描述】：

.inpsearch{
    border:2px solid #bbb;
    border-radius:14px;
    height:29px;
    padding:0 9px;
}

.inpsearch::-webkit-input-placeholder {
    color: #ccc;
    font-family:arial;
    font-size:20px;
}

&lt;input type='search' class='inpsearch' placeholder='&amp;#x1F50D'&gt;

我需要一个更大的搜索图标占位符，但增加字体大小它会到达输入的顶部边框。

我尝试了填充、边距...但没有成功。

如何保持占位符的字体大小增加并垂直居中？

【问题讨论】：

标签： html css placeholder

【解决方案1】：

您可以使用transform: translateY(2px) 将占位符稍微向下移动

.inpsearch{
    border:2px solid #bbb;
    border-radius:14px;
    height:29px;
    padding:0 9px;
}

.inpsearch::-webkit-input-placeholder {
    color: #ccc;
    font-family:arial;
    font-size:20px;
    transform: translateY(2px);
}

&lt;input type='search' class='inpsearch' placeholder='&amp;#x1F50D'&gt;

【讨论】：

【解决方案2】：

为了完美对齐，我们对输入应用相同的字体大小，但是这会改变输入字体，我们不希望这样，但是我们可以在用户输入时将其改回，使用 JS 或更多只需 CSS 即可方便地使用。

我认为必须需要搜索输入，对吗？这将允许我们使用:valid 选择器。

.inpsearch {
  border: 2px solid #bbb;
  border-radius: 14px;
  height: 29px;
  padding: 0 9px;
  font-size: 20px;
  width: 150px;
}

.inpsearch:valid {
  /* here we can either set it back to "initial" */
  /* or define the font size we want our input to normally be */
  font-size: initial;
}

.inpsearch::-webkit-input-placeholder {
  color: #ccc;
  font-family: arial;
  font-size: 20px;
}

<input type='search' required="required" class='inpsearch' placeholder='&#x1F50D'>
<br>

缺点是你必须在输入上有一个固定的宽度，所以字体大小不会影响它。

【讨论】：