Datalist behavior changed - css

Question

We had a datalist in our website which worked ok.
But recently (without any knowledgable code changes) it started messing up in Firefox/IE/Edge, but still works perfect in Chrome. Before it worked in every browser as it works in Chrome.
The code for the datalist looks like this:
<div class="form-group">
<!--<input type="text" class="form-control" placeholder="<?=lang("home_filter_where")?>" />-->
<div class="input-group">
<?php
if (!empty($filterdata['location'])) {
?>
<input id="location" name="location" type="text" list="locationList" autocomplete="off" value="<?php echo $filterdata['location']; ?>" class="form-control round-r">
<?php
} else {
?>
<input id="location" name="location" type="text" list="locationList" autocomplete="off" placeholder="Postcode of Gemeente" class="form-control round-r">
<?php
}
?>
<div class="aListCon">
<datalist id="locationList">
<!--[if IE 9]><select disabled><![endif]-->
<?php
foreach ($citiesbe as $city) {
echo "<option value=\"$city->zip_code\">$city->name_nl";
}
?>
<!--[if IE 9]></select><![endif]-->
</datalist>
</div>
</div>
</div>
it can be seen from the following URL:
https://www.giveaday.be/.
It is the search form on the homepage (we have this same field on a lot of pages, but the behavior is the same everywhere).
If I open it in Chrome, it looks like this:
https://imgur.com/a/DBInl , but in Edge it looks like this: https://imgur.com/a/1WQUj , and on IE like this: https://imgur.com/a/9lhsx.
Please note that the screenshots is only when i type in the value of the datalist!
In Chrome (as expected) when I type in letters (so the text in the option), the results also show up, this is not happening in firefox/IE/Edge, only typing the value works there.
What has happened and how do I make the datalist work again as it worked before on chrome/ie/edge/firefox ?