Solved

search bar styling

Posted on 2010-09-24
7
573 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:gurvinder372
ID: 33753786
which all browsers are you looking to support? if IE is excluded, then -webkit-gradient of css3 can be a solution.

0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 

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 500 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

Technology Partners: 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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

624 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