Solved

Inline styling of <select> options

Posted on 2015-02-10
5
58 Views
Last Modified: 2015-02-10
I want to change the color of <option> text in a <select> form field.

I used <select name="zones" width="100" style="width: 100px; color: #000;">

It doesn't work, the options color defaults to the default css.

How do I force the color to (black), in this case?

Can I use like <option style="color: #000;">Option Text</option>?

Thanks
0
Comment
Question by:Richard Korts
  • 3
  • 2
5 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 40601090
It won't work that way.  The select is very difficult to manage with stylesheets or even inline styling.  You have to script almost all changes.

I wrote a piece about styling options for options a while back.  It might help you with the problem if you are open to using a little scripting.

Cd&
0
 

Author Comment

by:Richard Korts
ID: 40601123
To Cd&,

Before you answered I tried <option style="color: #000;">; it works, at least in FireFox; I'm not even going to worry about IE right now.

Thanks.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40601356
If you only need Firefox, then you are not bad off.  Chrome is a little wonky, but gets the job done mostly.  With IE it is more a matter of version then anything else.  The version prior to IE10 are a real handful, but IE11 is getting pretty close to the support level of real browsers like FF.

Cd&
0
 

Author Closing Comment

by:Richard Korts
ID: 40601451
I'll take my chances with what I did.

According to this http://www.w3schools.com/browsers/browsers_stats.asp, Chrome & FireFox account for about 85% of browser usage currently.

If it doesn't work, the only issue is that the option text color is a lighter gray (not black); I don't want to monkey with the overall CSS styling, it's a WordPress site, etc.

Thanks
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40601471
Having the gray as a fallback is all you really need.  It is not necessary ro cater to user of every browser on the planet.  As long as they get a reasonable rendering they are not going to complain.  Most IE users don't know what they are missing, so the gray wil lok like what they expect to see anyway.

Cd&
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
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.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

786 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