Alignment of input's placeholder issue

Question

I've faced an issue with input (type search) in Google Chrome and other browsers. Please take a look on the basic HTML code:

<input type="search" placeholder="Search">

and CSS:

input {
  height: 30px;
  font-size: 16px;
}

JSFiddle Example. The problem is that the placeholder is not aligned well vertically in some browsers:

Google Chrome (v. 55.0.2883.87 m):

Mozilla Firefox (v. 45.0.2):

Internet Explorer (v. 11.576.14393.0):

Opera (v. 42.0.2393.94):

But it's displaying correctly (as I want it to be displayed) in:

Edge (v. 38.14393.0.0):

Safari (for Windows v. 5.1.7 7534.57.2):

I would be happy to place it precisely at the middle, please help to achieve this. Thank you!

UPD:

I've tried:

Resetting CSS;
Setting line-height;
Set paddings;
::-webkit-input-placeholder selector to set height / line-height;

Have you already tried to reset your CSS? With [normalize.css](https://necolas.github.io/normalize.css/), for instance. [Updated Fiddle](https://jsfiddle.net/rjuub4mf/1/) — Quinox, Jan 08 '17 at 16:40
@Quinox Thank you for your reply! Yes I have tried already, result is the same. — Mike, Jan 08 '17 at 16:42
And what if you target placeholder with prefix, just like [this example](https://css-tricks.com/almanac/selectors/p/placeholder/). — Quinox, Jan 08 '17 at 16:47
@Quinox I've tried this selector already and set height / line-height to the ::-webkit-input-placeholder but it has no effect on the alignment. — Mike, Jan 08 '17 at 16:49
@Quinox Thank you for paying attention and effort to my problem. — Mike, Jan 08 '17 at 17:33

score 1 · Answer 1 · answered Jan 12 '18 at 15:45

It maybe problem with font-family. Today I've spent 6 hours to fix the same problem on Android. Eventually this was font "HelveticaNeueCyr" problem. The font has a gap on Android devices only which impossible to fix with css.

I changed to Arial and fixed it.

bulldozer · Answer 2 · 2017-01-08T16:43:46.093

0

Add line-height to CSS:

input {
  line-height:30px;
  height: 30px;
  font-size: 16px;
  padding: 1px 0;
}

Modify line height because you use padding.

edited Jan 08 '17 at 16:43

answered Jan 08 '17 at 16:41

bulldozer

101
10

Thank you for your answer, but the problem persists. Sorry for misleading, I removed padding from the source code. Without padding the problem is the same. – Mike Jan 08 '17 at 16:43
Try to add this in css. input::-webkit-input-placeholder {} https://jsfiddle.net/d0rfbbLm/1/ And check this:http://stackoverflow.com/questions/4982045/html5-placeholder-line-height-in-webkit – bulldozer Jan 08 '17 at 17:11
Unfortunately it's not solving the problem. What version of Google Chrome do you use? – Mike Jan 08 '17 at 17:34
Check the link above. You can't align placeholder vertically unfortunately. V. 55.0.2883.87 m – bulldozer Jan 08 '17 at 17:36

Alignment of input's placeholder issue

2 Answers2