S
Stefan Mueller
Flightless Bird
I've a web page with several combo boxes (HTML <select> tag).
I'd like to color the selected combo box (e.g. red) and all other
combo boxes should be colored different (e.g. blue).
Unfortunately if you change the color of a combo box with 'onFocus'
the combo box reacts different as if it reacts while not changing the
color (or set the same color again).
Here an example to show what I mean:
http://test.seekware.ch/select.html
==============================
<html>
<body>
<select
onFocus = "this.style.background = '#99ff99';"
onBlur = "this.style.background = '#99ff99';">
<option>Entry A1
<option>Entry A2
</select>
<select
onFocus = "this.style.background = '#99ff99';"
onBlur = "this.style.background = '#99ff99';">
<option>Entry B1
<option>Entry B2
</select>
<select
onFocus = "this.style.background = '#ff9999';"
onBlur = "this.style.background = '#9999ff';">
<option>Entry C1
<option>Entry C2
</select>
<select
onFocus = "this.style.background = '#ff9999';"
onBlur = "this.style.background = '#9999ff';">
<option>Entry D1
<option>Entry D2
</select>
</body>
</html>
==============================
Please click at least twice to each of the four combo boxes and
finally click to the empty space on the page.
The combo boxes A and B should be colored green and the combo boxes C
and D blue.
If you click now alternatively on the combo boxes A and B they react
like not colored combo boxes because the color does not have to
change:
* Internet Explorer (works as designed): As soon as you click on the
combo box A or B the drop down list gets displayed
* Opera (works as designed): As soon as you click on the combo box A
or B the drop down list gets displayed
* Google Chrome (works as designed): As soon as you click on the
combo box A or B the drop down list gets displayed
* Mozilla Firefox (works as designed): You need to click twice on
the combo box A or B to show the drop down list (first click closes
the shown drop down list)
* Safari (works as designed): You need to click twice on the combo
box A or B to show the drop down list (first click closes the shown
drop down list)
But if you click now alternatively on the combo boxes C and D they
react different because the color has to change:
* Internet Explorer: First click changes the color and the second
click shows the drop down list
* Opera: The drop down list is still displayed with the first click
but with the wrong color (you have to click three times to see the
drop down list in the right color)
* Google Chrome (works as designed): Works the same way as before.
Great!!!
* Mozilla Firefox (works as designed): I don't like this behaviour
but it works the same way as before. Great!!!
* Safari (works as designed): I don't like this behaviour but it
works the same way as before. Great!!!
Like shows above there's a problem within Internet Explorer and Opera
if the color of a combo box has to change (first click changes only
the color and therefore an additional click is necessary to show the
drop down list).
Is there a way, a workaround (e.g. using JavaScripts) to force the
browsers to change the color AND to show the drop down list with only
a single click?
Regards
Stefan
I'd like to color the selected combo box (e.g. red) and all other
combo boxes should be colored different (e.g. blue).
Unfortunately if you change the color of a combo box with 'onFocus'
the combo box reacts different as if it reacts while not changing the
color (or set the same color again).
Here an example to show what I mean:
http://test.seekware.ch/select.html
==============================
<html>
<body>
<select
onFocus = "this.style.background = '#99ff99';"
onBlur = "this.style.background = '#99ff99';">
<option>Entry A1
<option>Entry A2
</select>
<select
onFocus = "this.style.background = '#99ff99';"
onBlur = "this.style.background = '#99ff99';">
<option>Entry B1
<option>Entry B2
</select>
<select
onFocus = "this.style.background = '#ff9999';"
onBlur = "this.style.background = '#9999ff';">
<option>Entry C1
<option>Entry C2
</select>
<select
onFocus = "this.style.background = '#ff9999';"
onBlur = "this.style.background = '#9999ff';">
<option>Entry D1
<option>Entry D2
</select>
</body>
</html>
==============================
Please click at least twice to each of the four combo boxes and
finally click to the empty space on the page.
The combo boxes A and B should be colored green and the combo boxes C
and D blue.
If you click now alternatively on the combo boxes A and B they react
like not colored combo boxes because the color does not have to
change:
* Internet Explorer (works as designed): As soon as you click on the
combo box A or B the drop down list gets displayed
* Opera (works as designed): As soon as you click on the combo box A
or B the drop down list gets displayed
* Google Chrome (works as designed): As soon as you click on the
combo box A or B the drop down list gets displayed
* Mozilla Firefox (works as designed): You need to click twice on
the combo box A or B to show the drop down list (first click closes
the shown drop down list)
* Safari (works as designed): You need to click twice on the combo
box A or B to show the drop down list (first click closes the shown
drop down list)
But if you click now alternatively on the combo boxes C and D they
react different because the color has to change:
* Internet Explorer: First click changes the color and the second
click shows the drop down list
* Opera: The drop down list is still displayed with the first click
but with the wrong color (you have to click three times to see the
drop down list in the right color)
* Google Chrome (works as designed): Works the same way as before.
Great!!!
* Mozilla Firefox (works as designed): I don't like this behaviour
but it works the same way as before. Great!!!
* Safari (works as designed): I don't like this behaviour but it
works the same way as before. Great!!!
Like shows above there's a problem within Internet Explorer and Opera
if the color of a combo box has to change (first click changes only
the color and therefore an additional click is necessary to show the
drop down list).
Is there a way, a workaround (e.g. using JavaScripts) to force the
browsers to change the color AND to show the drop down list with only
a single click?
Regards
Stefan