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/

input {
  border: 1px dashed black;
  overflow: visible;
  height: 28px;
  font-size: 30px;
}

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

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.

Solution 1

Answer to the original question - As indicated already by Sebastian Hens, this is not possible. The reason is because input elements are replaced elements and the overflow property applies only to non-replaced elements.

Quote from MDN about overflow property:

Applies to - non-replaced block-level elements and non-replaced inline-block elements

As already mentioned in comments, the ideal solution would be to make use of contenteditable elements because they do respect the overflow settings.

---

Here is a workaround solution which uses multiple linear-gradient to generate the dashed border effect. Part of the answer is adopted from Danield's answer (the parts about padding and removal of height). On top of it, I have modified the appearance and added the gradients.

Though we haven't added the height explicitly, the actual height of the area within the border would still be the same as that in your original code. I have added an input box with your original code on the left side for comparison. I don't know if that is acceptable for you. If you mandatorily want the height to be set then this would not work.

input.test {
  appearance: none;
  box-sizing: border-box;
  font-size: 30px;
  padding: 2px 0px 6px;
  border: 0;
  background: linear-gradient(to right, gray 50%, transparent 50%), linear-gradient(to right, gray 50%, transparent 50%), linear-gradient(to bottom, gray 50%, transparent 50%), linear-gradient(to bottom, gray 50%, transparent 50%);
  background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: 0px 0px, 0px 1em, 0px 0px, 100% 0px;
  box-shadow: inset 0px -10px 0px white;
  width: 200px;
}
input.original {
  border: 1px dashed black;
  overflow: visible;
  height: 28px;
  font-size: 30px;
  width: 200px;
}

input{
  vertical-align: top;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<input type='text' value='gggyyyXXX' class='original' />
<input type='text' value='gggyyyXXX' class='test' />

In the above snippet a white box-shadow is used to hide the bottom part of the gradient so that it doesn't overflow (you can see the effect by removing the box-shadow) and because of this it needs a solid color background. On the other hand if the height of your text box is fixed then you could use something like the below snippet to even support non solid backgrounds.

input.original {
  border: 1px dashed black;
  overflow: visible;
  height: 28px;
  font-size: 30px;
  width: 200px;
}
input.test-fixedheight {
  appearance: none;
  box-sizing: border-box;
  font-size: 30px;
  padding: 2px 0px 6px;
  border: 0;
  background: linear-gradient(to right, crimson 50%, transparent 50%), linear-gradient(to right, crimson 50%, transparent 50%), linear-gradient(to bottom, crimson 12.5%, transparent 12.5%, transparent 25%, crimson 25%, crimson 37.5%, transparent 37.5%, transparent 50%, crimson 50%, crimson 62.5%, transparent 62.5%, transparent 75%, crimson 75%, crimson 87.5%, transparent 87.5%), linear-gradient(to bottom, crimson 12.5%, transparent 12.5%, transparent 25%, crimson 25%, crimson 37.5%, transparent 37.5%, transparent 50%, crimson 50%, crimson 62.5%, transparent 62.5%, transparent 75%, crimson 75%, crimson 87.5%, transparent 87.5%),linear-gradient(to bottom, transparent 0%, white 0%);
  background-size: 8px 1px, 8px 1px, 1px 1em, 1px 1em, 100% 1em;
  background-repeat: repeat-x, repeat-x, no-repeat, no-repeat;
  background-position: 0px 0px, 0px 29px, 0px 2px, 100% 2px;
  width: 200px;
}
input.test-fixedheight-transparent {
  appearance: none;
  box-sizing: border-box;
  font-size: 30px;
  padding: 2px 0px 6px;
  border: 0;
  background: linear-gradient(to right, beige 50%, transparent 50%), linear-gradient(to right, beige 50%, transparent 50%), linear-gradient(to bottom, beige 12.5%, transparent 12.5%, transparent 25%, beige 25%, beige 37.5%, transparent 37.5%, transparent 50%, crimson 50%, beige 62.5%, transparent 62.5%, transparent 75%, beige 75%, beige 87.5%, transparent 87.5%), linear-gradient(to bottom, beige 12.5%, transparent 12.5%, transparent 25%, beige 25%, beige 37.5%, transparent 37.5%, transparent 50%, beige 50%, beige 62.5%, transparent 62.5%, transparent 75%, beige 75%, beige 87.5%, transparent 87.5%);
  background-size: 8px 1px, 8px 1px, 1px 1em, 1px 1em;
  background-repeat: repeat-x, repeat-x, no-repeat, no-repeat;
  background-position: 0px 0px, 0px 29px, 0px 2px, 100% 2px;
  width: 200px;
}


/* Just for demo */

body{
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

input{
  vertical-align: top;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<input type='text' value='gggyyyXXX' class='original' />
<input type='text' value='gggyyyXXX' class='test-fixedheight' />
<input type='text' value='gggyyyXXX' class='test-fixedheight-transparent' />

This approach is tested in Chrome, Firefox, Opera and IE11. Because gradients is supported in IE10, it should work fine there also but would not work with any of the lower versions as they don't support gradients.

Solution 2

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' />

Solution 3

To make it short: No this is not possible! The only thing what you could do is to create a javascript/html/css replacement for an input. But this would be an overhead.

To get an idea:

• set the input to visibility hidden
• position a DIV with the "input styling" under the input
• let a javascript check if the user does a keypress while focusing the input an copy the input value to the div

Comments

[Chris]

No I want a single line text input, I just want to bottom of the letters to be visible below the border.

[feeela]

an example with a font-size bigger than the input height to see the problem: jsfiddle.net/b4sr578j/11

[connexo]

As far as I know, it's not possible. Also, some other stuff is not working on input elements, such as for example :before and :after. It doesn't even work if you go -webkit-appearance: none; which should make it behave like any inline-block element.

[GillesC]

Bottom letter hidden can generally be fixed by sorting the CSS of the input and overflow won't work because it's not what is cutting the letter. Might be more something to do with line-height instead.

[BoltClock]

FYI, those bottom parts are known as descenders. Searching for "css input descender" turns up a number of results but none seem hopeful.

[Nico O]

It is also interesting how a element with contentEditable is dodging this: codepen.io/anon/pen/zGwbOq focus the element and see the outline (in chrome).

[Ashley Medway]

Adding padding: 2px fixes the problem in this instance, but is only a hack.

[BoltClock]

@Nico O: That is interesting indeed. Presumably, it is because contenteditable does not fundamentally change how an element is rendered. It just allows you to edit its content on the spot with a caret, much like how you can change an element's content using the web inspector. As a replaced element, an input element does not necessarily behave like a conventional CSS non-replaced box and so may have its own rendering rules, such as arbitrary clipping of the content region for example.

[Chris]

I considered content editable, problem is its possible to paste all sorts of content in there (formatting, images etc). I just want plain text, to get that with content editable I need javascript to sanitize properly.

[BoltClock]

No, that's not what the size attribute does.

[csaw]

the W3 school seems to agree with me. take a look

[BoltClock]

Nowhere does W3Schools say that the size attribute is used to control the line height of a text input.

[Mr. Alien]

Where is PHP tagged any where in this question? Also size attribute has nothing to do with this.

[csaw]

rechecked the question. It IS about height. I was going on width

[BoltClock]

@Ashley Medway: Not here, though.

[cybersoft]

Now the bottom of the gs and ys is invisible (Firefox).

[BoltClock]

This padding technique only works on Chrome. On Firefox and IE (which, incidentally, does not support outline-offset either), it's the content box that gets clipped - padding simply spaces out the content from the border edge, and does not actually increase the content area.

[Mr_Green]

I didn't get it.. we can use contenteditable div to solve this. right?

[Danield]

@Mr_Green the OP indicated in the comments to the question that he didn't want to use contenteditable

[Chris]

Yeah contenteditable supports rich text, images, line breaks etc - I don't want that. It's looking like my options are using contenteditable with lots of JS to sanitise OR just accept I need a taller fixed height. Think I'm leaning towards the latter now.