?
Solved

Inline styling of <select> options

Posted on 2015-02-10
5
Medium Priority
?
66 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 2000 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
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…
Suggested Courses
Course of the Month11 days, 6 hours left to enroll

752 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