0

When loading my website with IE the select drop down looks like this:

enter image description here

Does anybody know how I can remove the centered drop down arrows? In Chrome, Safari, Firefox they are not visible...

Here The code:

<div class="col-md mb-3">
<select class="common_selector intervention form-control form-control-sm border-secondary" id="common_selector_intervention">
<option value="">Intervention</option>
<?php echo filter_intervention($pdo_connect); ?>
</select>
</div>

I am using Bootstrap 4.

Hasan Haghniya
  • 2,347
  • 4
  • 19
  • 29
Jakob Tiebel
  • 55
  • 9
  • Which version of IE browser version and Bootstraps version are you using? I have created a [sample](http://jsfiddle.net/btzm9427/) using Bootstrap 4.3.1 version, it seems that everything works well in IE browser, you could create a new page to test it. Besides, please check the CSS style, whether there has other CSS style, which might be causing this issue. – Zhi Lv Nov 28 '19 at 02:16

1 Answers1

1

You can do this with a pseudo-element for the dropdown arrow on IE:

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

Hope it helps..

Akshay Prabhakar
  • 430
  • 4
  • 13