Bootstrap 4 Select on Safari not the same - css

Question

I'm using bootstrap 4, and on my Safari on my mac the dropdown looks like this
Which looks different from the input on the left of it. On other browsers like chrome and firefox the input and select look the same.
This is my dropdown HTML in my form
<div class="form-row">
<div class="col-lg-6 col-md-6 col-sm-12 form-group">
<input type="text" id="data-product" class="form-control border-0 form-control-lg shadow" name="Data[product]" maxlength="17" placeholder="Enter Product">
<div class="invalid-feedback"></div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 form-group">
<select id="data-data_from" class="form-control border-0 form-control-lg shadow" name="Data[data_from]">
<option value="" selected="" disabled="">Country</option>
<option value="jp" data-title="Japan">Japan</option>
<option value="us" data-title="USA">U.S.A</option>
</select>
<div class="invalid-feedback"></div>
</div>
<div class="col-lg-2 col-md-2 col-sm-12 form-group">
<button type="submit" class="btn btn-lg btn-success btn-block shadow"><i class="fas fa-search"></i></button> </div>
</div>
How do i style it the same on Safari? Thanks

Answer 1

In Bootstrap 4, try and use custom-select custom-select-lg instead of form-control form-control-lg
<select id="data-data_from" class="custom-select custom-select-lg border-0 shadow" name="Data[data_from]">
<option value="" selected="" disabled="">Country</option>
<option value="jp" data-title="Japan">Japan</option>
<option value="us" data-title="USA">U.S.A</option>
</select>
More about Custom-forms here
https://getbootstrap.com/docs/4.0/components/forms/#custom-forms

Answer 2

You need to add the following to your CSS
select {-webkit-appearance:none;}
This also works for Bootstrap 5

Answer 3

I think that happens because of Mac, i tried on both operating systems, and its the same for me.
Maybe try style="background-color:#fff", maybe that helps, but idk more than that sorry.
Maybe this link helps you, good luck :)

Answer 4

You can achive consisent look across browsers if you use Bootstrap Dropdown:
<div class="dropdown">
<button
class="btn dropdown-toggle shadow btn-lg"
type="button"
id="dropdownMenuButton"
data-toggle="dropdown"
aria-expanded="false"
>
Country
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Japan</a>
<a class="dropdown-item" href="#">USA</a>
</div>
</div>
It will look like this in Safari (and the same in other browsers):
But, this is a different element and so you need to work with its data differently than with <select>