Bootstrap 4 Select 在 Safari 上不一样

Question

我正在使用 bootstrap 4，在 mac 的 Safari 上，下拉菜单如下所示

它看起来与它左边的 input 不同。在 chrome 和 firefox 等其他浏览器上，输入和 select 看起来相同。

这是我 form

中的下拉菜单 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

我认为这是因为 Mac，我在两个操作系统上都试过了，对我来说都是一样的。

也许可以尝试 style="background-color:#fff"，也许这有帮助，但我知道的不止于此，抱歉。

Answer 2

如果您使用 Bootstrap 下拉菜单：

，您可以跨浏览器实现一致的外观

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

它在 Safari 中看起来像这样（在其他浏览器中也是如此）：

但是，这是一个不同的元素，因此您需要以不同于 <select>

的方式处理其数据

Answer 3

在 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

Answer 4

您需要将以下内容添加到您的 CSS

select {-webkit-appearance:none;}

这也适用于 Bootstrap 5

Bootstrap 4 Select 在 Safari 上不一样

Bootstrap 4 Select on Safari not the same

css

safari

bootstrap-4