HTML/CSS: floating option tags inside select tag

Question

Look at this simple fiddle with floating options inside a select.

fiddle

this seems to work perfectly in Chrome and Edge, but not in Firefox. Is there any possibility or hack in order to achieve the same result in 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

For advanced styling with a select tag I recommend to use a workaround. Because:

The <select> element is considered an "ugly" widget because it's impossible to style it consistently cross platform.

Source: https://developer.mozilla.org

---

A simple workaround example:

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

Of course you have to adjust this to your requirements. But now you can style it as you wish (cross platform).