Question

I’m trying to get rid of the default select to use something more aligned to the style of my site.

I created a <button> to wrap the select. Gave it opacity: 0 and absolute positioning and sizing to make it fit the button. With some jquery i made it so that the active option appears also as the text of the button, in a <span>. It looks pretty nice.

The problem is that on chrome and safari works perfectly, on firefox instead quite not!

webkit listen to the click on the select even if it’s not visible, moz don’t (pretty curious about IE and opera). I really don’t know how to solve this…

Here a fiddle with a reproduction of the problem:
http://jsfiddle.net/bakaburg1/YyvRf/2/

Any help is welcome.

Answer 1

You can use <div> instead of <button>

HTML:

<div class="btn btn-small select-container">
    <select>
        <option>title</option>
        <option>date</option>
        <option>author</option>
    </select>
</div>

CSS:

.btn.btn-small{
  padding-bottom: 2px;
  padding-top: 2px;
  color: #737373;
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
  font-size: 14px !important;
  font-variant: small-caps;
  font-weight: bold;
}

.btn.select-container {
  position: relative;
  padding-right: 24px;
}

.btn.select-container select {
  position: absolute;
  top: -1px;
  left: 0;
  height: 117%;
  width: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
  z-index: 1000;
}

select.btn {
  width: initial;
  height: 23px;
  padding-right: 20px;
  -webkit-appearance: none;
}

select.btn:focus {
  outline: none;
}

.select-container {
  position: relative;
}

See it here: http://jsfiddle.net/YyvRf/3/