在html中创建隐形文本字段？

Question

我正在尝试将html代码放到我的老板提供的设计模型中,并且一些美学 - 例如搜索栏的形状,有点奇怪和复杂.作为一个简单的解决方案,我想我只是在搜索栏的图像上放置一个文本字段,但我无法让它工作.

任何人都可以建议一种方法在图像上分层文本字段,让它看不见但仍然有效吗？

Answer 1

就隐形性而言,将此CSS放在您的输入上:

input {
    background: transparent;
    border: none;
}

看看这个jsFiddle,它显示了这一点.就输入的定位而言,您应该能够正常处理.