Beautify Select BOX

I have one select box and till some point i have modied to beatutify it but i want that it should be look great.

Just awesome i can't describe how but it should really appeal to the eyes, i am currently using this:

using any DOM can change the stuff because currently it is looking not so cool
<select name="category" class="textfield_select" id="category" size="5">
      	<cfoutput query="Stuff">
        	<option value="#catID#">#catName#</option>
        </cfoutput>
      </select> 
 
.textfield_select    {
 /*we will first set the border styles.*/
 border-width: 1px;
 border-style: solid;
 border-color: #ffcc00;
 /*we are now going to add in the shadow image that we created earlier*/
 background-repeat: repeat-x;
 background-image: url(corecontrol/img/bgcolor.jpg);
 /*I am going to add some text formatting of my own*/
 font-family: Calibri, Verdana, tahoma;
 font-size: 12px;
 color: #ffffff;
 width: 185px;
 }
 .textfield_select:hover    {
 border-color: #6699ff;
 border-width: 1px;
 }
 
 .textfield_select:focus    {
 border-color: #ffcc66;
 border-width: 1px;
 }

Open in new window

LVL 16
Gurpreet Singh RandhawaCEOAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tony van SchaikFront-end Web developerCommented:
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jessegivyDeveloperCommented:
0
Gurpreet Singh RandhawaCEOAuthor Commented:
both links are like adding extra custom too many JS files
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

jessegivyDeveloperCommented:
I feel your pain, sadly I don't believe there is a CSS solution to this issue.  The select element is "special" and doesn't like being styled.  The accepted standard to do what it sounds like you want to do is to use UL tags which can be styled heavily.

Just try googling, I found this page, looks good but I'm not sure:

http://www.lwis.net/journal/2008/04/08/pure-css-drop-down-menu/

Regards,

Jesse
0
jessegivyDeveloperCommented:
...still though, getting the sucker to post will likely involve some nasty JS.
0
jessegivyDeveloperCommented:
...perhaps you could style a textbox within each <li> so that it will simply appear as text to be selected.
0
Gurpreet Singh RandhawaCEOAuthor Commented:
can u tell how should i design the url tags inside that they should exactly as beautiful select box.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.