css - Bootstrap 选择在 firefox 和 chrome 中呈现不同

Question

Bootstrap 选择在 firefox 和 chrome 中呈现不同:

火狐:

Chrome

两个浏览器如何呈现相同的方式？最好是在 Chrome 中。

我的问题和那个问题不一样: Twitter Bootstrap: Getting Form Inputs and Buttons to be same the height in Chrome and Firefox

因为问题不是宽度或高度，问题是选择字段中的三 Angular 形(在右侧)，与浏览器渲染这个三 Angular 形的方式完全不同，下面问题的答案不适用于这个案例。

Answer 1

它们不会以相同的方式呈现。每个浏览器看起来都不一样，Explorer 是最好的!

我今天刚在做这个!您可以有一个背景 div，其中包括边框和右侧倒三 Angular 形的背景图像。然后在第一个选择的 div 上方有一个跨度(在您的情况下为“1”)。然后将选择菜单放在具有绝对定位和零不透明度的 div/span 的顶部。这使得选择菜单的浏览器默认值根本不显示。

http://codepen.io/ruchiccio/pen/zqbaKN

<div class="selector">
     <span>Show 24</span>
      <select class="form-control">
        <option value="">Show 24</option>
        <option value="">Show 48</option>
        <option value="" selected>Show 96</option>
        <option value="">View all</option>
      </select>
    </div>