☰

矢印スタイルの変更を選択 質問する

tag-icon • tag-icon css select
矢印スタイルの変更を選択 質問する

選択の矢印を自分の画像に置き換えようとしています。選択を同じサイズの div に含め、選択の背景を透明に設定し、div の右上隅に背景として画像 (矢印と同じサイズ) を含めています。

Chrome でのみ動作します。

ここに画像の説明を入力してください

Firefox と IE9 でこれを動作させるにはどうすればよいですか?

ここに画像の説明を入力してください

.styled-select {
  width: 100px;
  height: 17px;
  overflow: hidden;
  overflow: -moz-hidden-unscrollable;
  background: url(images/downarrow_blue.png) no-repeat right white;
  border: 2px double red;
  display: inline-block;
  position: relative;
}

.styled-select select {
  background: transparent;
  -webkit-appearance: none;
  width: 100px;
  font-size: 11px;
  border: 0;
  height: 17px;
  position: absolute;
  left: 0;
  top: 0;
}

body {
  background-color: #333333;
  color: #FFFFFF;
}

.block label {
  color: white;
}
<HTML>

<HEAD>
</HEAD>

<BODY>
  <p/>
  <form action="/prepareUpdateCategoryList.do?forwardto=search">

    <fieldset class="block" id="searchBlock">
      <p>
        <label style="width:80px">Class</label>
        <div class="styled-select">
          <select property="voucherCategoryClass">
    		<option value="0">Select </option>
    		<option value="7382">steam </option>
    	</select>
        </div>

      </p>
    </fieldset>
  </form>
</BODY>

</HTML>

ベストアンサー1

次のようなことを試しましたか:

.styled-select select {
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
}

テストはしていませんが、動作するはずです。

編集: Firefox はバージョン 35 までこの機能をサポートしていないようです (詳細はこちら)

ここに回避策がありますので、jsfiddleその投稿を確認してください。

おすすめ記事