Unnecessary border is coming in IE while setting background color

Question

I am facing a CSS issue in IE 10 (Document Mode : IE 7 Standard). I am getting multiple border in my dropdown list while setting background color. As shown in screen shot :

Extra border is coming on top and left. I have already tried border:none, border:0, outline:none, outline:0, border:transparent etc. but none of them works for me.

Edit : I am facing this issue only when I am adding background-color to dropdown list.

Answer 1

OK, I got the solution for removing border. According to this Link add span as a wrapper and after some CSS manipulation things are working fine for me.

Here what I did in my code :

        span.dropdown {
            float: left;
            overflow: hidden;
            border: 1px solid #ccc;
            height:20px;
        }
        select {
            background: none;
            border: none;
            color: #575652;
            float: left;
            outline: none;
            text-align: left;
            text-decoration: none;
            padding:6px 2px 6px 2px!important;
            display:block;height:23px;
        }
        span.dropdown select {
            margin: -2px  -3px -3px -2px ;
        } 

and in HTML :

 <span class="dropdown">
...
//dropdown code
...
</span>

Answer 2

Unfortunately IE10 doesn't let you remove the border on a dropdown menu.

Edit: Untested but try style="border-style:none;

also untested, try border: none !important;