Solved

Inline styling of <select> options

Posted on 2015-02-10
5
54 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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

743 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now