我想知道是否可以使输入字段内的字体/文本与输入字段本身重叠。我想知道这是否可行，而无需执行诸如创建两个输入字段之类的操作，其中一个与另一个重叠，一个具有隐藏字段框。
例如，假设您有一个看起来像手写的字体，并且您希望小写字母的下降（例如“p”“y”“g”的底部）挂在字段框下方而不是被它截断- 类似于在横格纸上书写时笔迹延伸到基线以下的方式。
我已经进行了广泛的搜索，但运气不佳，所以即使有人知道比“文本重叠输入框”和类似的字符串更好的搜索词，这本身也会有很大的帮助。
问题是，我不知道只关注输入框内文本的 CSS 选择器，或者我会尝试增加文本的 z-index 以便它位于框上方的图层上。
您是否尝试在输入元素上设置背景图像？您的背景图像可能是线条。
IE
input {
background: url(path/to/image.png) repeat-x;
}
编辑：
我对此进行了快速尝试，并在这里启动并运行了一些东西：http: //jsfiddle.net/qUc9Y/
我已将输入包装在另一个元素 (fieldset.input-wrapper) 中，并将您的 CSS 转换移动到这个新元素。我已经将输入向下推了 10 像素，因此它悬垂在容器创建的阴影上。我已将输入的背景设置为透明，因此 .input-wrapper 上的框阴影可以通过它看到。
最后，我添加了一些快速的 jQuery，以便当输入悬停时，css 转换将应用于新的 .input-wrapper 容器（即输入的父容器）。您应该能够对焦点/模糊执行相同的操作。
我希望这有帮助。
编辑2：
焦点状态现在也应该可以工作了，请参阅http://jsfiddle.net/yZ3uw/14/。