1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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

Discussion in 'Internet Explorer' started by Stefan Mueller, May 14, 2010.

  1. Stefan Mueller

    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
     
  2. PA Bear [MS MVP]

    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
     

Share This Page