HTML/CSS:select标签内的浮动选项标签

Question

看看这个简单的小提琴option里面浮动的select.

小提琴

这似乎在Chrome和Edge中完美运行,但在Firefox中则不然.为了在Firefox中获得相同的结果,有没有可能或黑客？

    <select size="8">
      <option></option>
      <option></option>
      <option></option>
      <option></option>
      <option class="flip"></option>
      <option class="flip"></option>
      <option class="flip"></option>
      <option class="flip"></option>
    </select>

    select{
      width: 420px;
      height: 200px;
      overflow: hidden;
    }

    option{
      width: 100px;
      height: 100px;
      float: left;
    }

    select option:nth-child(odd){
      background: #aaa;
    }
    select .flip:nth-child(odd){
      background: #fff;
    }
    select .flip:nth-child(even){
      background: #aaa;
    }

Answer 1

对于带有选择标签的高级样式，我建议使用解决方法。因为：

该<select>元素被认为是“丑陋”的小部件，因为不可能跨平台对其进行一致的样式设置。

来源： https: //developer.mozilla.org

一个简单的解决方法示例：

$('.dropdown-field').click(function(e) {
  var $this = $(this);
  $this.children('ul').slideToggle(100);
  var $target = $(e.target);
  if ($target.is('li')) {
    $this.children('span').html($target.text());
    $this.find('input[type="hidden"]').val($target.attr('data-value'));
  }
});

.dropdown-field {
  position: relative;
  padding: 10px;
  width: 300px;
  height: 20px;
  background: #ccc;
  cursor: pointer;
}
.dropdown-field > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dropdown-field > ul li {
  background: #ddd;
  padding: 10px;
  border-bottom: 1px solid #888;
}
.dropdown-field > ul li:hover {
  background: #bbb;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="dropdown-field">
  <span>please select ...</span>
  <ul>
    <li data-value="1">Option 1</li>
    <li data-value="2">Option 2</li>
    <li data-value="3">Option 3</li>
    <li data-value="4">Option 4</li>
  </ul>
  <input type="hidden" name="myfield" value="">
</div>

当然，您必须根据您的要求进行调整。但现在您可以按照自己的意愿设计它（跨平台）。