Is it possible for text/font to overlap input field?

Question

I am wondering if it is possible to make the font/text inside of an input field overlap the input field itself. I'd like to know if this is possible without doing something like creating two input fields with one overlapping the other and one having a hidden field box.

For instance, say you have a font that looks like handwriting and you want the descenders of lowercase letters (the bottom parts of "p" "y" "g" for instance) to hang below the field box rather than get cut off by it - similar to how handwriting extends below the baseline when writing on lined paper.

I've done extensive searching with little luck, so even if someone knows of a better search term than "text overlapping input-box" and similar such strings, that in iteself would be a tremendous help.

The thing is, I don't know of a CSS selector that just focuses on the text inside the input-box or I would try to increase the z-index of the text so that it would be on a layer above the box.

Answer 1

Have you tried setting a background image on the input element? Your background image could be the line.

i.e.

input {
    background: url(path/to/image.png) repeat-x;
}

EDIT:

I've had a quick play with this and have got something up and running here: http://jsfiddle.net/qUc9Y/

I've wrapped the input in another element (fieldset.input-wrapper) and moved your CSS transitions to this new element. I've pushed the input down relatively 10px so it overhangs the shadow created by the container. I've set the background of the input to transparent so the box shadows on the .input-wrapper are visible through it.

Finally, I've added some quick jQuery so that when the input is hovered, the css transitions are applied to the new .input-wrapper container (i.e. the input's parent). You should be able to do the same for focus/blur.

I hope this helps.

EDIT 2:

The focus state should now work too, see http://jsfiddle.net/yZ3uw/14/ .