在html中创建不可见的文本字段? [英] creating invisible text fields in 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中创建不可见的文本字段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！