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标签的高级样式，我建议使用变通方法。这是因为：

<select>元素被视为＆＃34;丑陋＆＃34;小部件，因为它不可能一贯地跨越平台。

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

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

＆＃13;

$('.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'));
  }
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

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

1 个答案: