473,706 Members | 2,543 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

applying style to <select>

Hi all,

I wanted to change the background color for only the first option in a
select box, but following changed the background color for the whole
dropdown box.

<select name="alltags" class="select" style="backgrou nd:yellow">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

then i did this to change the background color for only the first
option

<select name="alltags" class="select">
<option value="1" selected="selec ted"
style="backgrou nd:yellow">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

this too is not working. when drop down box is being displayed, the
color is not changed and instead when i drop it, the color for the
first option is changed.
how can i change backgroundcolor for the first option that's effective
when box is displayed?
plz help
Isha

Jun 27 '06 #1
5 8737
Isha, your expectation is corerct for IE 6. Not sure about 5.5 or
earlier. Also it won't work for Firefox unfortunatelly. Not even if
all elements are the same color. Firefox will set each element to
different color but when you select it the drop down will not change
it's color. Only setting style in <select> tag will change it in ffox.
It should be possible to mimic this behavior using Javascript but i
dont' have the code on hand.

Cheers!
Isha wrote:
Hi all,

I wanted to change the background color for only the first option in a
select box, but following changed the background color for the whole
dropdown box.

<select name="alltags" class="select" style="backgrou nd:yellow">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

then i did this to change the background color for only the first
option

<select name="alltags" class="select">
<option value="1" selected="selec ted"
style="backgrou nd:yellow">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

this too is not working. when drop down box is being displayed, the
color is not changed and instead when i drop it, the color for the
first option is changed.
how can i change backgroundcolor for the first option that's effective
when box is displayed?
plz help
Isha


Jun 27 '06 #2
I wrote this little Javascript snippet for you, only for ffox as IE
does not need it:
Make a note of onChange event in select tag.

<select name="alltags" class="select"
onchange="ffoxS electUpdate(thi s);" ID="Select1">
<option value="1" style="backgrou nd:yellow" >1</option>
<option value="2" style="backgrou nd:brown" >2</option>
<option value="3" style="backgrou nd:red" >3</option>
</select>
<script lang=javascript >
function ffoxSelectUpdat e(elmt)
{
if(!document.al l) elmt.style.cssT ext =
elmt.options[elmt.selectedIn dex].style.cssText;
}
</script>

ok******@gmail. com wrote:
Isha, your expectation is corerct for IE 6. Not sure about 5.5 or
earlier. Also it won't work for Firefox unfortunatelly. Not even if
all elements are the same color. Firefox will set each element to
different color but when you select it the drop down will not change
it's color. Only setting style in <select> tag will change it in ffox.
It should be possible to mimic this behavior using Javascript but i
dont' have the code on hand.

Cheers!
Isha wrote:
Hi all,

I wanted to change the background color for only the first option in a
select box, but following changed the background color for the whole
dropdown box.

<select name="alltags" class="select" style="backgrou nd:yellow">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

then i did this to change the background color for only the first
option

<select name="alltags" class="select">
<option value="1" selected="selec ted"
style="backgrou nd:yellow">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

this too is not working. when drop down box is being displayed, the
color is not changed and instead when i drop it, the color for the
first option is changed.
how can i change backgroundcolor for the first option that's effective
when box is displayed?
plz help
Isha


Jun 27 '06 #3
Hi
Thanks. This code is working with IE 6, but not firefox.
How this issue can be resolved for the firefox??
Isha.

ok******@gmail. com wrote:
I wrote this little Javascript snippet for you, only for ffox as IE
does not need it:
Make a note of onChange event in select tag.

<select name="alltags" class="select"
onchange="ffoxS electUpdate(thi s);" ID="Select1">
<option value="1" style="backgrou nd:yellow" >1</option>
<option value="2" style="backgrou nd:brown" >2</option>
<option value="3" style="backgrou nd:red" >3</option>
</select>
<script lang=javascript >
function ffoxSelectUpdat e(elmt)
{
if(!document.al l) elmt.style.cssT ext =
elmt.options[elmt.selectedIn dex].style.cssText;
}
</script>

ok******@gmail. com wrote:
Isha, your expectation is corerct for IE 6. Not sure about 5.5 or
earlier. Also it won't work for Firefox unfortunatelly. Not even if
all elements are the same color. Firefox will set each element to
different color but when you select it the drop down will not change
it's color. Only setting style in <select> tag will change it in ffox.
It should be possible to mimic this behavior using Javascript but i
dont' have the code on hand.

Cheers!
Isha wrote:
Hi all,

I wanted to change the background color for only the first option in a
select box, but following changed the background color for the whole
dropdown box.

<select name="alltags" class="select" style="backgrou nd:yellow">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

then i did this to change the background color for only the first
option

<select name="alltags" class="select">
<option value="1" selected="selec ted"
style="backgrou nd:yellow">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

this too is not working. when drop down box is being displayed, the
color is not changed and instead when i drop it, the color for the
first option is changed.
how can i change backgroundcolor for the first option that's effective
when box is displayed?
plz help
Isha


Jun 28 '06 #4
Hi
Thanks. This code is working with IE 6, but not firefox.
How this issue can be resolved for the firefox??
Isha.

ok******@gmail. com wrote:
I wrote this little Javascript snippet for you, only for ffox as IE
does not need it:
Make a note of onChange event in select tag.

<select name="alltags" class="select"
onchange="ffoxS electUpdate(thi s);" ID="Select1">
<option value="1" style="backgrou nd:yellow" >1</option>
<option value="2" style="backgrou nd:brown" >2</option>
<option value="3" style="backgrou nd:red" >3</option>
</select>
<script lang=javascript >
function ffoxSelectUpdat e(elmt)
{
if(!document.al l) elmt.style.cssT ext =
elmt.options[elmt.selectedIn dex].style.cssText;
}
</script>

ok******@gmail. com wrote:
Isha, your expectation is corerct for IE 6. Not sure about 5.5 or
earlier. Also it won't work for Firefox unfortunatelly. Not even if
all elements are the same color. Firefox will set each element to
different color but when you select it the drop down will not change
it's color. Only setting style in <select> tag will change it in ffox.
It should be possible to mimic this behavior using Javascript but i
dont' have the code on hand.

Cheers!
Isha wrote:
Hi all,

I wanted to change the background color for only the first option in a
select box, but following changed the background color for the whole
dropdown box.

<select name="alltags" class="select" style="backgrou nd:yellow">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

then i did this to change the background color for only the first
option

<select name="alltags" class="select">
<option value="1" selected="selec ted"
style="backgrou nd:yellow">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

this too is not working. when drop down box is being displayed, the
color is not changed and instead when i drop it, the color for the
first option is changed.
how can i change backgroundcolor for the first option that's effective
when box is displayed?
plz help
Isha


Jun 28 '06 #5
Hi
Thanks. This code is working with IE 6, but not firefox.
How this issue can be resolved for the firefox??
Isha.

ok******@gmail. com wrote:
I wrote this little Javascript snippet for you, only for ffox as IE
does not need it:
Make a note of onChange event in select tag.

<select name="alltags" class="select"
onchange="ffoxS electUpdate(thi s);" ID="Select1">
<option value="1" style="backgrou nd:yellow" >1</option>
<option value="2" style="backgrou nd:brown" >2</option>
<option value="3" style="backgrou nd:red" >3</option>
</select>
<script lang=javascript >
function ffoxSelectUpdat e(elmt)
{
if(!document.al l) elmt.style.cssT ext =
elmt.options[elmt.selectedIn dex].style.cssText;
}
</script>

ok******@gmail. com wrote:
Isha, your expectation is corerct for IE 6. Not sure about 5.5 or
earlier. Also it won't work for Firefox unfortunatelly. Not even if
all elements are the same color. Firefox will set each element to
different color but when you select it the drop down will not change
it's color. Only setting style in <select> tag will change it in ffox.
It should be possible to mimic this behavior using Javascript but i
dont' have the code on hand.

Cheers!
Isha wrote:
Hi all,

I wanted to change the background color for only the first option in a
select box, but following changed the background color for the whole
dropdown box.

<select name="alltags" class="select" style="backgrou nd:yellow">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

then i did this to change the background color for only the first
option

<select name="alltags" class="select">
<option value="1" selected="selec ted"
style="backgrou nd:yellow">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

this too is not working. when drop down box is being displayed, the
color is not changed and instead when i drop it, the color for the
first option is changed.
how can i change backgroundcolor for the first option that's effective
when box is displayed?
plz help
Isha


Jun 28 '06 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
3822
by: Andrea | last post by:
Hi, I'm trying to emulate part of our client-server application as a web site so customers can use it, and I'm stuck when it comes to re-ordering items in a list. Basically we have a list of available articles ("availableItems") and a list of articles already in an issue ("selectedItems"). What I want is to be able to move articles freely between the two lists and then on submission add them to the issue (which I can), but also move...
1
2413
by: Ang Talunin | last post by:
Hey, I wondering if it's possible to retrieve all the <option>-fields from a <select> when posting a <form> to a php file Example: I've got a form like this: <form action = phpfile.php method=post > <select name= "name">
1
12180
by: Matthias Wege | last post by:
hello, is there any chance to shape borders of a <select>-field? i tried select { background-color:#eee; border:1px solid red; }
2
30593
by: Manfred | last post by:
Hi I try to change the border of the <select> Tag to a thin, black line. On IE no reaction! <select style="border:1px solid #000000;background-color:red;"> <option>hallo</option> <option>hallo2</option> </select>
6
2406
by: Bonge Boo! | last post by:
This has got to be obvious, but I can't make it work. I have a form called with 3 pull down menus. They are linked to a database which generates the values for the <SELECT? Pull-downs. Lets say I have values selected for all three pull down menus. When I change the first "top-level" menu I want to reset both the second and third menus to the "default" state.
4
2140
by: joiv | last post by:
I'm making a <select></select> with lots of <option></option>. It contains all possible options. Because of the length of the list, I also have an <input type="text">. This is what I wish to do: onKeyDown I want all options that don't contain (or begin with, it doesn't matter which one) the typed letters to be removed from the <select>. My problem is that I don't know of any code to find words and identify
5
8312
by: Brian Foley | last post by:
Hello, I am used to using the label tag with check boxes and radio buttons in html forms. This allows me to click on the text of the label to activate/deactivate the check box / button, rather than having to click on the (possibly small) box or button. I recently tried to assign a label to a select "drop down list", but found that when I clicked on the label text to bring it into focus, the select box was reset to the first entry. ...
4
3588
by: luftikus143 | last post by:
Hi there, I have a nasty little problem, as so often, only with IE. Here is an screenshot to better illustrate the problem. http://geodata.grid.unep.ch/screenshot13.png The map is clickable (to enable zoom in and other functions). But in this case, I would like to select a value from the drop-down list, which displays as a "drop-up" list because of not having enough space downwards. Now, when I click to select a year, IE interprets this...
14
10015
mikek12004
by: mikek12004 | last post by:
In a form I have 5 elements (e.g. pictures) and I wish for the user to be able to set the order of appearance. For this I have for each picture a select box (names select1 to select5) with "please select something" as preselected and the rest options are values from 1 to 5. I want when a user selects a number a.k.a ans <option> that number/<option> to be removed from the rest of the select boxes and when the user selects another number the...
0
8772
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9276
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
9038
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8982
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6607
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5934
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4441
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4705
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3140
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.