Solved

Multi-color combo box in HTML/CSS

Posted on 2006-06-08
23
9,441 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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

 

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 150 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

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Changing Two Areas of a Page 5 27
how can I add blockquote after on my wordpress site 3 17
Hide Table in merge 3 34
Obtaining data on ASP 8 30
Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

821 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