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

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>

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

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

keep the placeholder with increasing font size and on center vertically

html

css

placeholder