Input text height is broken in safari

Question

I am looking to create a text input where the text fills up the whole input field vertically. As illustrated in the image below:

This works all fine in Firefox and Chrome.

In Safari I am seeing this problem:

It seems like the line-height is not applied properly for the input field. Funny enough it is applied correctly for the placeholder.

My code:

Html:

<input type="text" placeholder="ABCD" value="ABCD">

Css:

input {
  padding: 0;
  margin: 0;
  border: 0 none;
  height: 140px;
  line-height: 140px;
  width: 600px;
  font-size: 185px;
}

You can test my code with this link: https://jsfiddle.net/0xsven/16z9Lr6t/

Is this a bug or am I missing something?

Edit: I am on Mac OS with Safari 10.0.2

score 2 · Accepted Answer · answered Mar 01 '17 at 11:53

2

This is my solution:

<div class="text-box">
<input type="text" placeholder="ABCD" value="">
</div>
<div class="text-box">
<input type="text" placeholder="ABCD" value="ABCD">
</div>

CSS

.text-box input {
  padding: 0;
  margin: 0;
  border: 0 none;
  background: none;
  font-size: 185px;
  position: relative;
  top: -47px;
}

.text-box {
  background:#fff;
  height: 140px;
  width: 600px;
  overflow: hidden;
}

Live jsFiddle - https://jsfiddle.net/16z9Lr6t/3/

answered Mar 01 '17 at 11:53

grinmax

1,835
1
10
13

1

That works. Thank you. Would you say this is a bug in Safari? – Sven Mar 01 '17 at 12:46
@Sven Safari does not understand 'line-height'. I think it is a feature of this browser – grinmax Mar 01 '17 at 12:51

score 0 · Answer 2 · answered Mar 01 '17 at 10:56

0

Do not use line-height property in any line-level tags; apply only to block-level tags.

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

answered Mar 01 '17 at 10:56

Kuba Wojtach

541
3
10

> On non-replaced inline elements, line-height specifies the height that is used to calculate line box height. – Justinas Mar 01 '17 at 11:02
@kuba: Thanks for answering. Removing the line-height the problem persists. (Will update the title.) Any chance you can give me a tip that solves the problem? – Sven Mar 01 '17 at 11:06
@Justinas what does "non-replaced" even mean? Edit: http://stackoverflow.com/questions/12468176/what-is-a-non-replaced-inline-element But how does it help me? – Sven Mar 01 '17 at 11:09

score 0 · Answer 3 · answered Mar 01 '17 at 11:22

0

line-height specifies only boundaries of text, not actual text placement in that box.

Try setting vertical-align: middle (or some other value, can't test right now).

answered Mar 01 '17 at 11:22

Justinas

41,402
5
66
96

Input text height is broken in safari

3 Answers3