Solved

Inline styling of <select> options

Posted on 2015-02-10
5
62 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
[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
  • 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

734 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