сохранить заполнитель с увеличением размера шрифта и по центру по вертикали

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

Чтобы выровнять его идеально, мы применяем тот же размер шрифта для ввода, однако это изменит входной шрифт, и мы этого не хотим, однако мы можем изменить его обратно на пользовательский ввод, либо с помощью 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>

Недостатком является то, что у вас должна быть фиксированная ширина на входе, чтобы размер шрифта не влиял на нее.

Answer 2

Вы можете немного переместить заполнитель, используя 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'>