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

Question

我想知道是否有可能使输入字段内的字体/文本与输入字段本身重叠。我想知道在不创建两个输入域的情况下，是否可以做到这一点，其中一个输入域与另一个输入域重叠，另一个输入域具有隐藏字段框。

例如，假设您有一个看起来像手写的字体，并且您希望小写字母的下沉部分(例如"p“"y”"g“的底部)挂在字段框的下方，而不是被它截断-类似于在线条纸上书写时手写延伸到基线以下的方式。

我已经做了广泛的搜索，但运气很差，所以即使有人知道比“文本重叠输入框”和类似的这样的字符串更好的搜索词，这本身也是一个巨大的帮助。

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

Answer 1

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

即

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

编辑：

我对此进行了快速操作，并在这里启动并运行了一些东西：http://jsfiddle.net/qUc9Y/

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

最后，我添加了一些快速的jQuery，这样当输入悬停时，css转换就会应用于新的.input-wrapper容器(即输入的父容器)。您应该能够对焦点/模糊执行相同的操作。

我希望这能帮到你。

EDIT 2:

焦点状态现在也应该可以工作了，请参见http://jsfiddle.net/yZ3uw/14/。