38

すべてのブラウザで機能するカスタム ドロップダウンを作成したいと考えています。ここに作成しましたが、矢印をクリックできません。選択の背景として設定すると、Firefox はその上に矢印を上書きします。すべてのブラウザーで機能するカスタムの外観のドロップダウンを取得するための最良の手法と、Javascript を使用せずにそのノブをクリック可能にするにはどうすればよいか教えてもらえますか?

http://jsfiddle.net/DJDf8/1/

CSS:

#menulist {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 32px;
  border: 1px solid #000;
  width: 260px;
  text-indent: 8px;
}

.arrow {
  cursor: pointer;
  height: 32px;
  width: 24px;
  position: absolute;
  right: 0px;
  background-color: #c8c8c8;
  background: url('http://icons.aniboom.com/Energy/Resources/userControls/TimeFrameDropDownFilter/Dropdown_Arrow.png') 0;
}
<span style="position:relative;">
         <span class="arrow" ></span>
<select id="menulist">
         <option value="one">One</option>
         <option value="two">Two</option>
</select>
</span>

4

6 に答える 6

2

pointer-events矢印ボタンの上に div を置くことができるが、それでも矢印ボタンをクリックできるので、この問題に役立つ可能性があります。

css を使用pointer-eventsすると、div をクリックすることができます。

ただし、この方法は IE11 より古いバージョンの IE では機能しません。矢印ボタンの上に配置する要素が要素である場合、IE8 および IE9 で何かが機能する可能性がありますが、SVGこのように進めたい方法でボタンのスタイルを設定するのはより複雑になります。

Js フィドルの例: http://jsfiddle.net/e7qnqzx6/2/

于 2015-07-13T18:12:26.793 に答える