Bootstrap Dropdown not working correctly in Internet Explorer

Question

I am using twitter bootstrap in my angular project. Styles work fine in the drop-down menu in Chrome, but when I load it in IE 11 it doesn't look right. In particular, a down arrow button.

Has anyone else had a problem with IE? How can i solve this? See comparative photo below my problem.

My html section is below, any comments are welcome in advance!

<select class=" btn btn-default" ng-options="obj for obj in data.finding" ng-model="gapSection.finding" > <option value="">Please select</option> </select> 

Answer 1

I just solved for IE using:

 select::-ms-expand { border:none; background:#fff; } 

A source

Answer 2

Add this to your css file

 select::-ms-expand { display: none; } 

Answer 3

I think you should use the bootstrap form-control class in the HTML select tag so that it displays correctly:

 <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> </select> 

Answer 4

Bootstrap supports 3 drops for Internet Explorer 7, but you can add it back just by adding conditional CSS called bootstrap-ie7.css.

here is the download link: https://github.com/coliff/bootstrap-ie7