f



HTML select field where the OPTION text is of different colors

Hi

Is it possible to have an HTML select field where the OPTION text is
of different colors?

<select>
<option>Black_text (yellow_text)</option>
</select>

I tried using an CSS SPAN element to color the text but that doesn't
seem to work.

Any ideas?
0
lb.venky (3)
2/28/2011 6:52:42 AM
comp.lang.php 32646 articles. 0 followers. Post Follow

11 Replies
587 Views

Similar Articles

[PageSpeed] 47


"venky_lb" <lb.venky@gmail.com> wrote in message 
news:126b4778-ace0-4a04-8a8c-0d2ec2793234@k10g2000prh.googlegroups.com...
> Hi
>
> Is it possible to have an HTML select field where the OPTION text is
> of different colors?
>
> <select>
> <option>Black_text (yellow_text)</option>
> </select>
>
> I tried using an CSS SPAN element to color the text but that doesn't
> seem to work.
>
> Any ideas?
>

<select>
<option>one</option>
<option style="color: #ff6666; background: #336633">two</option>
<option>three</option>
</select>

Hope this helps

Andy 

0
Andy
2/28/2011 8:50:42 AM
On Feb 28, 9:52=A0am, venky_lb <lb.ve...@gmail.com> wrote:
> Hi
>
> Is it possible to have an HTML select field where the OPTION text is
> of different colors?
>
> <select>
> <option>Black_text (yellow_text)</option>
> </select>
>
> I tried using an CSS SPAN element to color the text but that doesn't
> seem to work.
>
> Any ideas?

It's impossible. The only one thing that you can try is to emulate
select/options by javascript, but it's not easy
0
gemoroy
2/28/2011 1:31:31 PM
On 2/28/2011 7:52 AM, venky_lb wrote:
> Hi
>
> Is it possible to have an HTML select field where the OPTION text is
> of different colors?
>
> <select>
> <option>Black_text (yellow_text)</option>
> </select>
>
> I tried using an CSS SPAN element to color the text but that doesn't
> seem to work.
>
> Any ideas?

Hi Venky,

This is a PHP newsgroup.
You might get luckier here: alt.html

Regards,
Erwin Moller


-- 
"That which can be asserted without evidence, can be dismissed without 
evidence."
-- Christopher Hitchens
0
Erwin
2/28/2011 1:36:21 PM
On Feb 28, 6:31=A0pm, "gemo...@gmail.com" <gemo...@gmail.com> wrote:
> On Feb 28, 9:52=A0am, venky_lb <lb.ve...@gmail.com> wrote:
>
> > Hi
>
> > Is it possible to have an HTML select field where the OPTION text is
> > of different colors?
>
> > <select>
> > <option>Black_text (yellow_text)</option>
> > </select>
>
> > I tried using an CSS SPAN element to color the text but that doesn't
> > seem to work.
>
> > Any ideas?
>
> It's impossible. The only one thing that you can try is to emulate
> select/options by javascript, but it's not easy

Hi,
  Thanks for Sharing Ideas!!!
  any references for select/options by javascript?

Cheers
0
venky_lb
2/28/2011 1:38:14 PM
On 2/28/2011 8:38 AM, venky_lb wrote:
> On Feb 28, 6:31 pm, "gemo...@gmail.com"<gemo...@gmail.com>  wrote:
>> On Feb 28, 9:52 am, venky_lb<lb.ve...@gmail.com>  wrote:
>>
>>> Hi
>>
>>> Is it possible to have an HTML select field where the OPTION text is
>>> of different colors?
>>
>>> <select>
>>> <option>Black_text (yellow_text)</option>
>>> </select>
>>
>>> I tried using an CSS SPAN element to color the text but that doesn't
>>> seem to work.
>>
>>> Any ideas?
>>
>> It's impossible. The only one thing that you can try is to emulate
>> select/options by javascript, but it's not easy
>
> Hi,
>    Thanks for Sharing Ideas!!!
>    any references for select/options by javascript?
>
> Cheers

Try a javascript newsgroup - and ask html/css questions in an 
appropriate newsgroup.

-- 
==================
Remove the "x" from my email address
Jerry Stuckle
JDS Computer Training Corp.
jstucklex@attglobal.net
==================
0
Jerry
2/28/2011 4:44:43 PM
gemoroy@gmail.com wrote:
> On Feb 28, 9:52 am, venky_lb <lb.ve...@gmail.com> wrote:
>> Hi
>>
>> Is it possible to have an HTML select field where the OPTION text is
>> of different colors?
>>
>> <select>
>> <option>Black_text (yellow_text)</option>
>> </select>
>>
>> I tried using an CSS SPAN element to color the text but that doesn't
>> seem to work.
>>
>> Any ideas?
> 
> It's impossible. The only one thing that you can try is to emulate
> select/options by javascript, but it's not easy
+1.

Option boxes are generally OS dependent, and very browser specific.

You don't need a LOT of javascript to generate a flyout menu with 
colours, but you do need SOME.

Whether its an acceptable compromise, is up to the exact situation.
0
The
2/28/2011 4:47:52 PM
venky_lb wrote:
> On Feb 28, 6:31 pm, "gemo...@gmail.com" <gemo...@gmail.com> wrote:
>> On Feb 28, 9:52 am, venky_lb <lb.ve...@gmail.com> wrote:
>>
>>> Hi
>>> Is it possible to have an HTML select field where the OPTION text is
>>> of different colors?
>>> <select>
>>> <option>Black_text (yellow_text)</option>
>>> </select>
>>> I tried using an CSS SPAN element to color the text but that doesn't
>>> seem to work.
>>> Any ideas?
>> It's impossible. The only one thing that you can try is to emulate
>> select/options by javascript, but it's not easy
> 
> Hi,
>   Thanks for Sharing Ideas!!!
>   any references for select/options by javascript?
> 

Write your ownn. You need to construct tables or a set of divs with 
onclick() or onmouseover()  events that actually cause the flyout, and 
allow you to set a form variable  depending on what has been onclicked() 
ed. Then you can mark them hidden until the user clicks on a dummy 
select box, and re-hide them if he clicks on a transparent layer that 
covers the whole screen that lies 'underneath' them.

Its nasty because Old IE doesn't handle layers too well.

And also because old IE is a bitch to search at any speed, to identify 
which elements you need to turn on and off.

(solved here by making a dynamically extended Javascript array of all 
elements that are switched on, as they are switched on, and searching 
just that).

My code is a bit too application specific to be useful here.

And belongs in a javascript group anyway.


> Cheers
0
The
2/28/2011 4:57:39 PM
On Feb 28, 1:31=A0pm, "gemo...@gmail.com" <gemo...@gmail.com> wrote:
> On Feb 28, 9:52=A0am, venky_lb <lb.ve...@gmail.com> wrote:
>
> > Hi
>
> > Is it possible to have an HTML select field where the OPTION text is
> > of different colors?
>
> > <select>
> > <option>Black_text (yellow_text)</option>
> > </select>
>
> > I tried using an CSS SPAN element to color the text but that doesn't
> > seem to work.
>
> > Any ideas?
>
> It's impossible. The only one thing that you can try is to emulate
> select/options by javascript, but it's not easy

It's impossible is it. I wish you'd told me that before I actually did
it last year for a client of mine. Now I guess I'll have to tell them
that they can't use it any more because it is now impossible!

Although this has nothing to do with php, for anyone interested in
performing the impossible, here is an example of doing it with
different background colours. I will leave it as an exercise for the
reader to change it to use text colours (apart from those that find it
impossible).
<select onchange=3D"this.style.backgroundColor=3D'#'+this.value;"
style=3D"background-color: rgb(255, 0, 0);" name=3D"fd_colour" size=3D"1">
<option style=3D"background-color: rgb(255, 255, 255);"
value=3D"ffffff">Colour</option>
<option selected=3D"" style=3D"background-color: rgb(255, 0, 0);"
value=3D"ff0000">&nbsp;</option>
<option style=3D"background-color: rgb(255, 153, 0);"
value=3D"ff9900">&nbsp;</option>
<option style=3D"background-color: rgb(255, 255, 0);"
value=3D"ffff00">&nbsp;</option>
<option style=3D"background-color: rgb(0, 255, 0);"
value=3D"00ff00">&nbsp;</option>
<option style=3D"background-color: rgb(0, 255, 255);"
value=3D"00ffff">&nbsp;</option>
<option style=3D"background-color: rgb(159, 197, 232);"
value=3D"9fc5e8">&nbsp;</option>
<option style=3D"background-color: rgb(215, 172, 255);"
value=3D"d7acff">&nbsp;</option>
<option style=3D"background-color: rgb(255, 0, 255);"
value=3D"ff00ff">&nbsp;</option>
<option style=3D"background-color: rgb(255, 204, 153);"
value=3D"ffcc99">&nbsp;</option>
<option style=3D"background-color: rgb(255, 153, 204);"
value=3D"ff99cc">&nbsp;</option>
<option style=3D"background-color: rgb(204, 255, 204);"
value=3D"ccffcc">&nbsp;</option>
<option style=3D"background-color: rgb(255, 255, 153);"
value=3D"ffff99">&nbsp;</option>
</select>
0
Captain
2/28/2011 11:33:25 PM
On 28/02/11 23:33, Captain Paralytic wrote:

>>> <select>
>>> <option>Black_text (yellow_text)</option>
>>> </select>

>> It's impossible. The only one thing that you can try is to emulate
>> select/options by javascript, but it's not easy

> It's impossible is it. I wish you'd told me that before I actually did
> it last year for a client of mine. Now I guess I'll have to tell them
> that they can't use it any more because it is now impossible!

OPs requirement is to have more than 1 colour of text in a single
option. Your solution applies a single colour to the whole of the option.

I would have thought span would work, but it seems it doesn't from the
OPs post, and my own testing confirms that span is not permitted within
option according to the validator, which means applying different styles
to parts of the option text is, at best, problematical

Rgds

Denis McMahon
0
Denis
3/1/2011 12:23:15 AM
Captain Paralytic wrote:
> On Feb 28, 1:31 pm, "gemo...@gmail.com" <gemo...@gmail.com> wrote:
>> On Feb 28, 9:52 am, venky_lb <lb.ve...@gmail.com> wrote:
>>
>>> Hi
>>> Is it possible to have an HTML select field where the OPTION text is
>>> of different colors?
>>> <select>
>>> <option>Black_text (yellow_text)</option>
>>> </select>
>>> I tried using an CSS SPAN element to color the text but that doesn't
>>> seem to work.
>>> Any ideas?
>> It's impossible. The only one thing that you can try is to emulate
>> select/options by javascript, but it's not easy
> 
> It's impossible is it. I wish you'd told me that before I actually did
> it last year for a client of mine. Now I guess I'll have to tell them
> that they can't use it any more because it is now impossible!
> 
> Although this has nothing to do with php, for anyone interested in
> performing the impossible, here is an example of doing it with
> different background colours. I will leave it as an exercise for the
> reader to change it to use text colours (apart from those that find it
> impossible).
> <select onchange="this.style.backgroundColor='#'+this.value;"
> style="background-color: rgb(255, 0, 0);" name="fd_colour" size="1">
> <option style="background-color: rgb(255, 255, 255);"
> value="ffffff">Colour</option>
> <option selected="" style="background-color: rgb(255, 0, 0);"
> value="ff0000">&nbsp;</option>
> <option style="background-color: rgb(255, 153, 0);"
> value="ff9900">&nbsp;</option>
> <option style="background-color: rgb(255, 255, 0);"
> value="ffff00">&nbsp;</option>
> <option style="background-color: rgb(0, 255, 0);"
> value="00ff00">&nbsp;</option>
> <option style="background-color: rgb(0, 255, 255);"
> value="00ffff">&nbsp;</option>
> <option style="background-color: rgb(159, 197, 232);"
> value="9fc5e8">&nbsp;</option>
> <option style="background-color: rgb(215, 172, 255);"
> value="d7acff">&nbsp;</option>
> <option style="background-color: rgb(255, 0, 255);"
> value="ff00ff">&nbsp;</option>
> <option style="background-color: rgb(255, 204, 153);"
> value="ffcc99">&nbsp;</option>
> <option style="background-color: rgb(255, 153, 204);"
> value="ff99cc">&nbsp;</option>
> <option style="background-color: rgb(204, 255, 204);"
> value="ccffcc">&nbsp;</option>
> <option style="background-color: rgb(255, 255, 153);"
> value="ffff99">&nbsp;</option>
> </select>


How many browsers did you actually TRY that one?

My memory is that such tricks (style inside OPTION) work with firefox , 
but not e.g. IE6.


I am fairly sure they worked in the MAC default browser as well..but IE6 
stubborn refused to parse them.

Which is why I went the javashit route: It was in the end MORE cross 
browser compatible.


0
The
3/1/2011 12:41:59 AM
On Feb 28, 11:52=A0am, venky_lb <lb.ve...@gmail.com> wrote:
> Hi
>
> Is it possible to have an HTML select field where the OPTION text is
> of different colors?
>
> <select>
> <option>Black_text (yellow_text)</option>
> </select>
>
> I tried using an CSS SPAN element to color the text but that doesn't
> seem to work.
>
> Any ideas?

Thanks for Ur Efforts
0
venky_lb
3/2/2011 10:10:58 AM
Reply: