Solved

Multi-color combo box in HTML/CSS

Posted on 2006-06-08
23
9,429 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
  • 7
  • 4
  • 4
  • +3
23 Comments
 
LVL 10

Expert Comment

by:ClickCentric
Comment Utility
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
Comment Utility
> 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
Comment Utility
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
 

Author Comment

by:j2k
Comment Utility
Hello,

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

Accepted Solution

by:
ClickCentric earned 150 total points
Comment Utility
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
Comment Utility
> 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
Comment Utility
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
Comment Utility
> 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
Comment Utility
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
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 1

Expert Comment

by:stevetellis
Comment Utility
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
Comment Utility
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
Comment Utility
stevetellis, read the question!
0
 
LVL 2

Expert Comment

by:PurpleSlade
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

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

Do you want to insert HTML5 video into your site? This is the tutorial how to do so. What are the main advantages of HTML5 video? 1) Have good compression, good image quality, and low decode processor use. 2) It is royalty-free 3) It is easi…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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 …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

771 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

10 Experts available now in Live!

Get 1:1 Help Now