0

Consider the following html snippet for input tag - 

Test Input : <input id="1" name="1"  style="width:250px;height:50px;" value="Check alignment" />

Until MS IE 8, by default input text is top aligned (screenshot below). MS IE 8 input text alignment

Starting MS IE 9 and later, input text is center aligned (screenshot below). MS IE 9+ input text alignment

I have a requirement that all input be top aligned in MS IE 9 and above (other browsers - chrome, firefox etc aren't much of a concern).

I have tried a few style options (below) but could not get the top alignment as seen in MS IE 8.

  • the align attribute available for input does not seem to work for text. It seems to work for images though.
  • the text-align attribute only aligns text horizontally. No vertical alignment is possible.
  • the vertical-align attribute does not seem to have any affect :(

I checked Crossbrowser input text vertical alignment as suggested by SO, but I still could not get that working as required.

I may be missing something. Any suggestions (read css, html or script in the decreasing order of preference) are welcome :)

As a side-note, it will also be good to know from an UX point of view as to why MS decided to change behavior of input text after MS IE 8.

[EDIT]: I am dealing with legacy code. I've been advised against changes that can break automated UI testing. So, <textarea> is not the first choice. Likewise, wrapping in a <div> or replacing with jquery based alternative is not being considered.

Community
  • 1
  • 1
Rakesh N
  • 2,450
  • 3
  • 25
  • 32
  • Have you checked [**google**](https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=html%20input%20tag%20text%20align%20top%20internet%20explorer)? – Michael Benjamin Mar 31 '16 at 12:20
  • I don't know why you would want to have so much whitespace under your input. Maybe you're looking for ``? – VeganCreamPie Mar 31 '16 at 12:21
  • @Michael_B, yes. In case you are referring to line-height, it did not work. – Rakesh N Mar 31 '16 at 12:52
  • @VeganCreamPie, agreed. I am dealing with legacy code. I was advised that it may break some automated UI tests. So did not go in that direction. – Rakesh N Mar 31 '16 at 12:52

3 Answers3

0

a simple, yet cross browser styled solution is to use padding to control the positioning of the text. see below

input {
  width:210px;
  height:10px;
  padding:20px;
}
Input : <input id="1" name="1" value="Check alignment" />
omarCreativeDev
  • 182
  • 9
0

An <input type=”text”> is just a single line input field, it’s working as it should, are you sure you don’t want to use a textarea?

Anyway try to use padding top and bottom to have a visual similitude of a vertical alignment

Maurizio Battaghini
  • 438
  • 7
  • 13
0

I don't see a way but removing all style from the input, wrapping it in a div and making it look like the input you want (border, shadow etc.), also use js to have it trigger the click on the input when you click anywhere in the wrapper div.

Velimir Tchatchevsky
  • 2,812
  • 1
  • 16
  • 21