How to put textfield inside the image?


Could anyone show me a code snippet that produces the "search box" that is similar to the one in this example:

It surprised me that googling "textfield inside image" only gave me all the results of "image inside textfield".

You can't put inside an image other element, but you can do the following to achieve this effect:

Use a css as:

    .search-container{background:url(your/image/path) no-repeat top left;width:200px;height:50px;}
    .search-container input{width:150px;}
    .search-container button{width:40px;}

And html like:

        <div class="search-container">
            <input type="text" /> <button>Search</button>

Now, the search-container will be with a background image and inside you can put your search form (input and button).

if you want the input without the 'default' style your can reset with:

.search-container input{border:none;background:transparent;}