Text 文本/字体是否可能与输入字段重叠？

我想知道是否有可能使输入字段内部的字体/文本与输入字段本身重叠。我想知道，如果不创建两个输入字段，其中一个重叠，另一个隐藏字段框，这是否可行

例如，假设您有一种看起来像手写体的字体，并且您希望小写字母（例如“p”“y”“g”的底部）的后代挂在字段框下方，而不是被字段框截断-类似于在划线纸上书写时手写延伸到基线下方

我做了大量的搜索，但运气不好，所以即使有人知道比“文本重叠输入框”和类似的字符串更好的搜索词，在iteself中这将是一个巨大的帮助

---

问题是，我不知道CSS选择器只关注输入框内的文本，或者我会尝试增加文本的z索引，使其位于框上方的一层。

您尝试过在输入元素上设置背景图像吗？您的背景图像可能是线条

i、 e

编辑：

我快速地玩了一下，并在这里启动并运行了一些东西：

我已经将输入包装到另一个元素（fieldset.input wrapper）中，并将CSS转换移动到这个新元素。我已经将输入向下推了10像素，这样它就覆盖了容器创建的阴影。我已经将输入的背景设置为透明，这样.input包装上的框阴影可以通过它看到

最后，我添加了一些快速jQuery，以便在悬停输入时，css转换应用于新的.input包装容器（即输入的父容器）。您应该能够对聚焦/模糊执行相同的操作

我希望这有帮助

编辑2:

---

焦点状态现在也应该工作了，请参阅。

您好，谢谢您的提示。我确实考虑过使用像另一个图像或某种ButgdBoad之类的东西，但是我现在有一个“活跃”的输入字段，这意味着文本字段本身上有一些渐变的CSS的执行（参见：UnEnvial.com／005／登录.php）。问题是，如果我使用一个静态图像并在其上分层文本或静态背景，我将失去悬停和聚焦效果。如果可能的话，我想保持CSS的悬停和聚焦效果，并且仍然能够让字体与输入框重叠。我已经用一些东西更新了我的答案，我希望能够满足保持CSS转换的要求。太棒了，克里斯。感谢您抽出时间来整理这些内容。唯一不可操作的是焦距，当我点击框并键入颜色时，颜色不会变蓝，也不会保持焦距时的颜色。我用一些我认为可以实现的js（jsfiddle.net/yZ3uw/）更新了它，但它仍然不起作用。我不完全清楚为什么，因为它似乎清楚地表明在焦点上它应该是蓝色的。没问题。我已经更新了您的版本（）来处理聚焦：唯一的问题是hover（）需要两个函数（一个在hover上执行，另一个在unhover上执行），但是focus（）只需要一个。这只是将删除“input wrapper focus”类的代码移动到blur（）处理程序的一个例子。希望这有帮助。哇，克里斯，你真棒。非常感谢您在这方面的帮助和知识！我相信另一个用户会过来，看到这个答案，并同样感到感激。非常感谢。很漂亮。

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