Bootstrap 4 Select on Safari not the same

Issue

I’m using bootstrap 4, and on my Safari on my mac the dropdown looks like this

enter image description here

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

Solution

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

Answered By – srakl

Answer Checked By – Clifford M. (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.