Take the 2-minute tour ×

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?

share|improve this question

1 Answer 1

up vote 4 down vote accepted

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.

share|improve this answer
ah, that works, thank you! –  abcooper Sep 6 '12 at 17:10

Your Answer


