?
Solved

Style Change for drop down box

Posted on 2008-10-20
4
Medium Priority
?
1,247 Views
Last Modified: 2013-12-13
I have drop down box, and want to change it's look. (Please see attachments)

I will use form for submit data and search later through MySQL. First however I would like to finish a style. Drop down boxes will take data from database, but for now I'm working on style and using <label> tag. (I'm not sure if it's best way for later)

Please see attachments and code, what is the best way to do that?
Thank you
#searchbar {
	margin: 0;
	padding: 0;
	height: 38px;
	width: 100%;
	background: url(images/bg_search.jpg) repeat-x;
	}
#searchbar  ul{
	float: left;
	margin: -1em 0 0 1em;
	padding: 1.3em 0 0 0em;
	color:#FFFFFF;
	height: 100px;
	width: 720px;
	font-size: 1.4em;
	}
	
.searchbar_img {
	float: left;
	margin: -.5em .5em 0 .5em;
	}
.searchbar_label {
	text-decoration: none;
	color: #808080;
	border: #000000 solid 1px;
	}
.searchbar_box {
	vertical-align: top;
	font-size: .9em;
	text-decoration: none;
	color: #808080;
	border: #000000 solid 1px;
	height: 18px;
	}
 
 
--------------------------------------
 
    <div id="searchbar">
    	<ul id="searchtop">
        	<li>
       	    Quick Search</li>
        	<li><img class="searchbar_img" src="images/lens.png"/></li>
		   	<li><input class="searchbar_box" type="text" id="control_header_key1" value="enter your keyword" name="control_header$key1"/></li>
   			<li><input class="searchbar_box"type="text" id="control_header_key2" value="enter your industry" name="control_header$key2"/></li>
			<li><label class="searchbar_box"><select name="pd1" id="pd1" title="test"><option value="5">Country</option><option value="15">Canada</option><option value="100">Untited States</option></select></label></li>
   			</li>
        </ul>
 
    
    
  </div>

Open in new window

Picture-7.png
Picture-8.png
0
Comment
Question by:Goldblum
[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
4 Comments
 
LVL 5

Expert Comment

by:crush83
ID: 22763793
Because select elements are controlled primarily by the operating system, and secondarily by the browser, they are impossible to style identically cross browser/platform unless you employ the use of Javascript.

This will require a much more advanced approach utilizing div elements and the HTML and Javascript DOM. If you aren't very familiar with these technologies, it would be wise to search google for a premade solution that you can tailor for your needs.
0
 
LVL 3

Accepted Solution

by:
Mr_Splash earned 2000 total points
ID: 22765319
Hi Goldblum,

I've used the following to completely customise a drop down
http://www.cult-f.net/2007/12/14/elselect/
0
 
LVL 19

Expert Comment

by:NerdsOfTech
ID: 22766284
Unfortunately you can't use CSS3 ::selection class to do this, YET until browsers actually are capable of utilizing it fully. It is a JavaScript work-around for this solution like the other experts said.
0
 

Author Closing Comment

by:Goldblum
ID: 31508353
Thank you for the link. I will try to integrate it to my website. I hope that it will be easy to integrate inside of <form> tag along with PHP to search from database entered keyword in the group selected through drop down.
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

764 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