Goldblum
asked on
Style Change for drop down box
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
Picture-8.png
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>
Picture-7.pngPicture-8.png
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
ASKER
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.
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.