0

私のサイトのスタイルに合わせたものを使用するために、デフォルトの選択を取り除こうとしています。

<button>選択をラップするを作成しました。opacity: 0 を指定し、ボタンに合わせて絶対位置とサイズを指定します。いくつかのjqueryを使用して、アクティブなオプションがボタンのテキストとしても表示されるようにしました<span>. それはかなりいいですね。

問題は、chrome と safari では完全に動作するのに対し、firefox ではまったく動作しないことです!

webkit は、表示されていなくても、選択のクリックをリッスンします。moz はそうしません (IE と Opera にかなり興味があります)。これを解決する方法が本当にわかりません...

ここで、問題を再現したフィドル: http://jsfiddle.net/bakaburg1/YyvRf/2/

どんな助けでも大歓迎です。

4

1 に答える 1

0

<div>代わりに使用できます<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;
}

ここでそれを参照してください：http：//jsfiddle.net/YyvRf/3/

于 2012-09-01T20:55:48.897 に答える