保持占位符的字体大小不断增加，并垂直居中

Question

.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;
}

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

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

我试过填充、边距。。。没有成功。

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

Answer 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);
}

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

Answer 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>

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