Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Multi-color combo box in HTML/CSS

Posted on 2006-06-08
23
Medium Priority
?
9,478 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
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

963 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