在 html 中创建不可见的文本字段?

2022-01-13 00:00:00 textbox html

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

I'm trying to put html code to a design mockup my boss provided, and some of the aesthetics - the shape of the search bar, for example, are a little bit bizarre and complex. As an easy fix, I thought I would simply put a text field over an image of the search bar, but I can't get it to work.

谁能建议一种在图像上添加文本字段的方法,使其不可见但仍然有效?

Can anyone suggest a way to layer a text field over an image, leaving it invisible but still functional?

推荐答案

就隐身而言,把这个 CSS 放在你的输入上:

As far as the invisibility goes, put this CSS on your input:

input {
    background: transparent;
    border: none;
}

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

Check out this jsFiddle that shows this in action. As far as positioning the input goes, you should be able to handle that normally.

相关文章