Link to home
Start Free TrialLog in
Avatar of j2k
j2k

asked on

Multi-color combo box in HTML/CSS

Hello,

I would like to create a combobox in html using css where each word in each selection is a different color.

The following code makes an option in the combo box red:

<option style="color: #FF0000">Combo option</option>

However, I would like the word "Combo" to be red, and the word "option" to be green.

I've tried the following:

<option style="color: #FF0000">Combo <span style="color: #00FF00">option</span></option>

and also:

<option><span style="color: #FF0000">Combo</span> <span style="color: #00FF00">option</span></option>

but neither worked.

Does anyone have any advice? Thanks.
Avatar of ClickCentric
ClickCentric

There's no cross browser compatible way to do this.  IE won't allow it and being the most widely used browser, it effectively makes attempting to do it pointless.  You could use a scrollable div with onclick events to set a hidden form field, though.
> There's no cross browser compatible way to do this.
It's not a matter of browser support...
The HTML specs simply does not allow any markup inside the options.
And without markup on your words, you cannot style them differently.
HTML specs may not, but some browsers have done so in the past or do allow it now...that's generally why people try to do it as they've seen a post somewhere where someone has claimed to do it.  Do a google search on it and you'll see what I mean.  This is how I found out that it does work in some situations and why I said there wasn't a cross browser compatible way to do it.  Ultimately, though,  if enough of the browsers support it, people will start using it.  innerHTML is a prime example.
Avatar of j2k

ASKER

Hello,

Do you have an example of achieving it using scrollable divs?
ASKER CERTIFIED SOLUTION
Avatar of ClickCentric
ClickCentric

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
> HTML specs may not, but some browsers have done so in the past or do allow it now...
If the specs don't support it, then don't do it.  All html pages should validate.  It's as simple as that.
And for the javascript widget equivalents, IMHO they are all junk because they are not accessible by essence.
So, my advice is for you to just stick with standard options with only one font color.
But if you have clients breathing down your neck insisting that they want something, as long as they're the ones that sign the checks, you go with what works, standards or not.  
> But if you have clients breathing down your neck insisting that they want something
Clients usually know nothing about good web design.  You need to take some time educating them.

I have seen too many major sites only working with one sepcific browser.  If you use a Mac, then you should know what i mean.

In the UK, coding accessible pages is mandatory: http://www.alistapart.com/articles/accessuk/
It's funny that you mention this because I am going through Wrox Beginning CSS right now and there is an example in Chapter 5 of this exact thing.  You can download the code for the book free which has the full html there:

http://www.wrox.com/WileyCDA/WroxTitle/productCd-0764576429,descCd-download_code.html

It is in chapter 5, Try it out, example 5-5

Purple
First of all, it is definitely possible to do with CSS. Also it does not hurt anyone if your HTML works in all browsers but does not validate.

For example, if you have colored scrollbars that only work in Internet Explorer, does it hurt Gecko-based browsers if you include that colored scrollbar content? No. They just ignore it, plus you get that nice effect in IE.

>Clients usually know nothing about good web design.  You need to take some time educating them.
Clients are also generally stubborn when it comes to "good" Web design. If you won't do it, someone else will do it and will get the money you should have gotten. Your client will not notice if something only works in IE or if their code doesn't validate...
Oh and because I didn't answer your question and (if you're lazy like me) you don't want to download that book PurpleSlade was talking about...

<html>
  <body>
    <select name="whatever">
      <option value="myvalue" style="color: red">Some text</option>
    </select>
  </body>
</html>

OR if you are somewhat familiar with CSS...

<html>
  <head>
    <style type="text/css">
    <!--
      .redText { color: red; }
      .blueText { color: #00F; }
      .grayBoldText { color: #333; font-weight: bold; }
    # -->
    </style>
  </head>
  <body>
    <select name="whatever">
        <option value="myvalue" style="color: orange">Some text</option>
        <option value="myvalue2" class="redText">Some text2</option>
        <option value="myvalue3" class="blueText">Some text3</option>
        <option value="myvalue4" class="grayBoldText">Some text4</option>
    </select>
  </body>
</html>
Oops! Forgot what language I was writing in!

In my post above, I should have written:

 -->
</style>

That pound sign should've been omitted!
stevetellis, read the question!
Ooops - I was guilty of misunderstanding the question as well (or was sloppy in reading it).  Apologies, that code example doesn't talk about applying different colors to different words in the option list, only to different colors to the whole selection.  Now I understand why everyone was saying it couldn't be done.  D'oh!  :)
Avatar of j2k

ASKER

I haven't abandoned the question; it's just that no answer has provided exactly what I need.
what you asked for is impossible.  that's the only correct answer.  there are workarounds but none of them are good.
Avatar of j2k

ASKER

Possible or not, no solution to the problem was issued, so it's unfair to give full points accordingly IMO.
This site is not about problem/solution, it's about question/answer.
A correct answer deserves full credit even if it does not solve the problem.
If you want a solution, then simply drop the word coloring from your requirements.
This might sound rude, but unfortunately there is no other way.
Avatar of j2k

ASKER

I don't begrudge giving points for the work given, but not FULL points, as it didn't provide the answers I wanted.
I understand your point of view, but that's not how this site works.
Once you asked your question, the points are not yours anymore.  All you can do is grade the answers.
And a correct answer deserves an "A" according to the "rules"... even if it does not solve your problem.
You are welcome to criticise the way the site functions but i'm afraid doing so in this thread will have very minimal impact.
I guess the best you can do is add a post saying that you are unhappy with the fact that what you wanted to do cannot be done.
Avatar of Michel Plungjan
The code link given by ClickCentric
https://www.experts-exchange.com/questions/21879847/DataGrid-like-Select-box-500pts.html#16870544
can be modified to do what you want