asked on

search bar styling

hi,
I want to do search bar, but with custom textbox style, I want to do something similar to attached images, so any idea how to do that

roxviper

hi,

make a div with the orange background, put in it a transparent textbox and next to it the search button

LZ1

Here is a great solution on EE already: https://www.experts-exchange.com/questions/25195610/Search-button-and-textbox-logic.html

I've done this several times so if you need more help or wish for us to elaborate, let us know

Gurvinder Pal Singh

which all browsers are you looking to support? if IE is excluded, then -webkit-gradient of css3 can be a solution.

njgroup

ASKER

LZ1,

I got the code like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">

#search_container
{width:400px;
}

#text_box
{width:300px;
float:left;
}

#button
{width:408px; height:40px;
float:right;
background-image:url(searchbox.png)
}

</style>

</head>

<body>
<div id="search_container">
<div id="text_box">
<input type="trxt">
</div>
<div id="button">
</div>
</div>

</body>

</html>

but I dont know where did he put the textbox!! and where is his click event!!
so, any idea what to do?

njgroup

ASKER

gurvinder372,

it would be great if I can make two versions, one in CSS 2 and one in CSS 3
so, I will check the browser first, if IE7 and older, then let's change the style to CSS 2 otherwise lets keep it in CSS 3

ASKER CERTIFIED SOLUTION

LZ1

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

njgroup

ASKER

thanks, that works fine :)