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

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>

缺点是输入必须具有固定的宽度，因此字体大小不会对其造成影响。