在 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.

这篇关于在 html 中创建不可见的文本字段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！