[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Inline styling of <select> options

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

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article discusses four methods for overlaying images in a container on a web page
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month19 days, 19 hours left to enroll

872 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