Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

search bar styling

Posted on 2010-09-24
7
Medium Priority
?
577 Views
Last Modified: 2013-11-19
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

 search-button
 search-button-pressed
0
Comment
Question by:njgroup
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
7 Comments
 
LVL 5

Expert Comment

by:roxviper
ID: 33753378
hi,

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

Expert Comment

by:LZ1
ID: 33753613
Here is a great solution on EE already:  http://www.experts-exchange.com/Software/Photos_Graphics/Web_Graphics/Q_25195610.html

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

Expert Comment

by:Gurvinder Pal Singh
ID: 33753786
which all browsers are you looking to support? if IE is excluded, then -webkit-gradient of css3 can be a solution.

0
Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

 

Author Comment

by:njgroup
ID: 33755746
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?


0
 

Author Comment

by:njgroup
ID: 33755764
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
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 2000 total points
ID: 33755802
Take a look at this code and see if it will help you a little bit further.  

The textbox is the <input> in your code.  
The button should have an anchor tag inside of it and then you should make that a tag a block level element.  

Try the code below and see if that helps at all.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Aventric Technologies</title>
		
		<style> 
			.txt-box {
				background:url(http://www.aventric.com/new/images/form-bg.png) no-repeat top center;
				width:289px;
				height:35px;
				font-size:20px;
				float:left;
				border:none;
				padding-left: 10px;
			}
			.submit {
				background:url(http://www.aventric.com/new/images/form-btn.png) no-repeat top center; 
				width:86px;
				height:34px;
				display:block;
				float:left;
				border:none;
			}
		</style>
	</head>
	
<body>
			<form action="gdform.php"> 
				<input type="text" class="txt-box" /> 
				
				<input type="button" name="submit" class="submit" value=""/>

			</form>
</body>
</html>

Open in new window

0
 

Author Comment

by:njgroup
ID: 33757463
thanks, that works fine :)
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question