Bootstrap 4 Select on Safari not the same

user_13571872 0
Viewed 700

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

bootstrap-4 safari css
4 Answers

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

user_20358190

You need to add the following to your CSS

select {-webkit-appearance:none;}

This also works for Bootstrap 5

user_14264310

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 :)

Admin1

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):

Safari screenshot

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

user_95086350
Related