• Welcome to Tux Reports: Where Penguins Fly. We hope you find the topics varied, interesting, and worthy of your time. Please become a member and join in the discussions.

Colored combo boxes (HTML <select> tag) react different (IE andOpera) than not colored combo boxes -

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
 
P

PA Bear [MS MVP]

Flightless Bird
Re: Colored combo boxes (HTML <select> tag) react different (IE and Opera) than not colored combo boxes - workaround wanted

Developer-specific resources include:

MSDN IE Development Forum (post such questions here instead)
http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/threads

Tip: When posting in Developer forums, always include a link to your web
site or test pages in your first post.

IE Developer Center
http://msdn.microsoft.com/en-us/ie/default.aspx

Learn IE8
http://msdn.microsoft.com/en-us/ie/aa740473.aspx

HTML and DHTML Overviews and Tutorials
http://msdn.microsoft.com/en-us/library/ms537623.aspx and

Cascading Style Sheets (CSS)
http://msdn2.microsoft.com/en-us/ie/aa740476.aspx

Expression Web SuperPreview for Internet Explorer (free, stand-alone visual
debugging tool for IE6, IE7, and IE8)
http://www.microsoft.com/downloads/...FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677

Expression Web SuperPreview Release Notes
http://www.microsoft.com/expression/products/Web_SuperPreviewReleaseNotes.aspx

Validators:
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

Stefan Mueller wrote:
> 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
 
You must log in or register to reply here.
Top