creating invisible text fields in html?

Question

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?

Answer 1

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

input {
    background: transparent;
    border: none;
}

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