CODEWITHSUNDEEP
jqueryhtmlcssinternet-explorercross-browser
siva636
siva636

Reputation: 16451

IE issue with styling <select/> element

Consider the following HTML markup:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>search/master</title>
        <style type="text/css">
            select{
                background-color: pink;
            }
            option{
                background-color: white;
            }
        </style>
    </head>

    <body>
        <p>
            <select>
                <option>one........</option>
                <option>two........</option>
            </select> 
        </p>
    </body>
</html>

Output on FF as follows: (Similar output comes on Chrome, Safari and Opera as well)

output on FF & other browsers

But output on IE as follows:

output on IE

What is the reliable and simple workaround to make the output on IE looks similar to other browsers?

Upvotes: 0

Views: 5475

Answers (4)

Alex
Alex

Reputation: 9041

If you definitely want to do this, you could use a 1px x 1px background image, and set the option to :transparent

select{
    background: url(http://ajthomas.co.uk/stackoverflow-help/back.png);
}
option{
    background: transparent;
}

See the jsfiddle example i have done for you

Upvotes: 1

bhavya_w
bhavya_w

Reputation: 10107

The problem occurs when we specify some background color for the options inside the select element and the select element itself.

Workaround : Apply style (background-color) to the option elements only when the select element is in focussed state. ( it is only during focussed state of the select element we actually see the option elements inside it )

 select{
     background-color: #f1f1f1;
     ...              
  }

  select:focus > *{
    background-color:#fff;
  }

Upvotes: 0

Raj
Raj

Reputation: 380

  • First remove the following css value, it's giving the OPTIONS a white background color and thus hiding the select's pink background color in IE.

    option {
    background-color: white;
}

  • Second always enclose Form elements inside the Form and Fieldset tag like shown below:-

    <form>
<fieldset>
    <select>
        <option>One</option>
    </select>
</fieldset>
</form>

  • Third Form and Fieldset have a default border and padding values so in css you can add this code to remove those default values:

    form, fieldset {
    border: 0px;
    margin: 0px;
    padding: 0px;
}

So in short the main reason for IE not displaying the Select Box correctly is because the select element isn't enclosed in FORM and the OPTION's White background color value.

Hope this helps.

Upvotes: 1

Bas Slagter
Bas Slagter

Reputation: 9929

If you make both background color( for select and option) pink, it looks exactly the same in every browser. A better solution maybe..do not specify the background color on the option element at all....

Upvotes: 1

Related Questions