Bootstrap 4 Select on Safari not the same-CodePudding

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

CodePudding user response：

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.

But, this is a different element and so you need to work with its data differently than with <select>