Overflow visible on text input, is it possible?

Question

CSS overflow:visible doesn't seem to get applied to inputs.

See the following JS fiddle: https://jsfiddle.net/b4sr578j/

Is it possible to make the bottom of the gs and ys visible (without increasing the height of the text input)?

Thanks for any help.

Answer 1

Here's a solution for Webkit and Firefox:

(This won't work in IE - because it doesn't support outline-offset)

1) Remove the height

2) Use outline instead of border

3) Add a negative outline-offset

4) Add padding to fine tune the offset

FIDDLE

input {
  overflow: visible;
  font-size: 30px;
  outline: 1px dashed black;
  border: 0;
  outline-offset: -8px;
  padding: 6px 0 2px 8px;
}

<input type='text' value='gggyyyXXX' />