css - Bootstrap 4 在 Safari 上选择不一样

Question

我使用的是 Bootstrap 4，在 Mac 上的 Safari 上，下拉菜单如下所示

这看起来与左侧的输入不同。在 Chrome 和 Firefox 等其他浏览器上，输入和选择看起来相同。

这是我的表单中的下拉 HTML

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

如何在 Safari 上设置相同的样式？谢谢

Answer 1

在 Bootstrap 4 中，尝试使用 custom-select custom-select-lg 而不是 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>

有关自定义表单的更多信息请参见此处 https://getbootstrap.com/docs/4.0/components/forms/#custom-forms