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

Question

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

有人可以建议一种方法在图像上叠加文本字段，使其不可见但仍然有效吗？

Answer 1

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

input {
    background: transparent;
    border: none;
}

Check out this jsFiddle 显示了这一点。就输入的定位而言，您应该能够正常处理。