Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Multi-color combo box in HTML/CSS

Posted on 2006-06-08
23
Medium Priority
?
9,467 Views
Last Modified: 2008-01-09
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.
0
Comment
Question by:j2k
[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
  • 7
  • 4
  • 4
  • +3
23 Comments
 
LVL 10

Expert Comment

by:ClickCentric
ID: 16867509
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.
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16868839
> 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.
0
 
LVL 10

Expert Comment

by:ClickCentric
ID: 16871045
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.
0
Independent Software Vendors: 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!

 

Author Comment

by:j2k
ID: 16871699
Hello,

Do you have an example of achieving it using scrollable divs?
0
 
LVL 10

Accepted Solution

by:
ClickCentric earned 600 total points
ID: 16871738
Actually, shaggy_the_sheep has a pretty detailed sample of how to do something similar to this in another thread I'm involved in at the moment.

http://www.experts-exchange.com/Web/Web_Languages/HTML/Q_21879847.html#16870544

0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16874906
> 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.
0
 
LVL 10

Expert Comment

by:ClickCentric
ID: 16875597
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.  
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 16876264
> 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/
0
 
LVL 2

Expert Comment

by:PurpleSlade
ID: 16972987
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
0
 
LVL 1

Expert Comment

by:stevetellis
ID: 17254953
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...
0
 
LVL 1

Expert Comment

by:stevetellis
ID: 17254970
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>
0
 
LVL 1

Expert Comment

by:stevetellis
ID: 17254993
Oops! Forgot what language I was writing in!

In my post above, I should have written:

 -->
</style>

That pound sign should've been omitted!
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 17255201
stevetellis, read the question!
0
 
LVL 2

Expert Comment

by:PurpleSlade
ID: 17264027
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!  :)
0
 

Author Comment

by:j2k
ID: 17751737
I haven't abandoned the question; it's just that no answer has provided exactly what I need.
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 17751838
what you asked for is impossible.  that's the only correct answer.  there are workarounds but none of them are good.
0
 

Author Comment

by:j2k
ID: 17751936
Possible or not, no solution to the problem was issued, so it's unfair to give full points accordingly IMO.
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 17752090
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.
0
 

Author Comment

by:j2k
ID: 17752210
I don't begrudge giving points for the work given, but not FULL points, as it didn't provide the answers I wanted.
0
 
LVL 30

Expert Comment

by:GrandSchtroumpf
ID: 17752485
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.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 17754724
The code link given by ClickCentric
http://www.experts-exchange.com/Web/Web_Languages/HTML/Q_21879847.html#16870544
can be modified to do what you want
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
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…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

715 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