Firefoxの選択要素から矢印を削除する方法

selectCSS3を使用し て要素のスタイルを設定しようとしています。WebKit（Chrome / Safari）で必要な結果を得ていますが、Firefoxがうまく動作していません（IEでさえ気にしていません）。私はCSS3 appearanceプロパティを使用していますが、何らかの理由でドロップダウンアイコンをFirefoxから振ることができません。

これが私がやっていることの例です：http : //jsbin.com/aniyu4/2/edit

#dropdown {
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 background: transparent url('example.png') no-repeat right center;
 padding: 2px 30px 2px 2px;
 border: none;
}

ご覧のとおり、私は特別なことをしようとしているのではありません。デフォルトのスタイルを削除して、独自のドロップダウン矢印を追加したいだけです。私が言ったように、FirefoxではなくWebKitで素晴らしい。どうやら、-moz-appearance: noneドロップダウン項目を取り除きません。

何か案は？いいえ、JavaScriptはオプションではありません

さて、私はこの質問が古いことを知っていますが、2年後にはMozillaは何もしていません。

簡単な回避策を考え出しました。

これは本質的に、Firefoxの選択ボックスのすべてのフォーマットを取り除き、カスタムスタイルで選択ボックスの周りにスパン要素をラップしますが、Firefoxにのみ適用する必要があります。

これがあなたの選択メニューだとしましょう：

<select class='css-select'>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

そして、CSSクラス「css-select」が次のようであると仮定しましょう：

.css-select {
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

Firefoxの場合、これは選択メニューで表示され、続いて醜いFirefox選択矢印が表示され、その後にカスタムの外観が表示されます。理想的ではありません。

これをFirefoxで実行するために、クラス「css-select-moz」でspan要素を追加します：

   <span class='css-select-moz'>
     <select class='css-select'>
       <option value='1'> First option </option>
       <option value='2'> Second option </option>
     </select>
   </span>

次に、CSSを修正して、-moz-appearance：windowでmozillaのダーティアローを非表示にし、カスタムアローをスパンのクラス 'css-select-moz'にスローしますが、次のようにそれだけをmozillaに表示します。

.css-select {
   -moz-appearance:window;
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

@-moz-document url-prefix() {
.css-select-moz{
     background-image: url('images/select_arrow.gif');
     background-repeat: no-repeat;
     background-position: right center;
     padding-right: 20px;
  }
} 

3時間前にこのバグに遭遇しただけでかなりクールです（私はウェブデザインに不慣れで、完全に独学です）。しかし、このコミュニティは間接的に私に多くの助けを提供してくれました。

私はそれをFirefox 18（Mac）バージョン18でテストし、次に22（更新後）でテストしました。

すべてのフィードバックを歓迎します。

更新：これはFirefox v35で修正されました。詳細については、要旨を参照してください。

Firefoxから選択矢印を削除する方法を見つけました。トリックは-prefix-appearance、text-indentとの組み合わせを使用することtext-overflowです。これは純粋なCSSであり、追加のマークアップは必要ありません。

select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

Windows 8、Ubuntu、Mac、Firefoxの最新バージョンでテスト済み。

ライブの例：http : //jsfiddle.net/joaocunha/RUEbp/1/

テーマの詳細：https : //gist.github.com/joaocunha/6273016

私にとってうまくいくコツは、選択幅を100％より大きくして、オーバーフローを適用することです：非表示

select {
    overflow:hidden;
    width: 120%;
}

これは現在、FFでドロップダウン矢印を非表示にする唯一の方法です。

ところで。美しいドロップダウンが必要な場合は、http： //harvesthq.github.com/chosen/を使用してください

重要な更新：

Firefox V35以降、外観プロパティが機能するようになりました!!

V35上のFirefoxの公式リリースノート：

コンボボックス-moz-appearanceのnone値で使用すると、ドロップダウンボタンが削除されます（バグ649849）。

したがって、デフォルトの矢印を非表示にするために、select要素に次のルールを追加するのと同じくらい簡単です。

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

デモ

select {
  margin: 50px;
  border: 1px solid #111;
  background: transparent;
  width: 150px;
  padding: 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>

これを行うためのシンプルで適切な方法を見つけました。クロスブラウザで、分解可能で、フォームの投稿を壊しません。最初は、選択ボックスの設定opacityにします0。

.select { 
    opacity : 0;
    width: 200px;
    height: 15px;
}

<select class='select'>
    <option value='foo'>bar</option>    
</select>

これはあなたがまだそれをクリックできるようにするためです

次に、選択ボックスと同じサイズのdivを作成します。divは、選択ボックスの下に背景として配置する必要があります。{ position: absolute }とz-indexを使用してこれを実現します。

.div {
    width: 200px;
    height: 15px;
    position: absolute;
    z-index: 0;
}

<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
    <option value='foo'>bar</option>    
</select>

JavaScriptでdivのinnerHTMLを更新します。jQueryによるEasypeasy：

$('.select').click(function(event)) { 
    $('.div').html($('.select option:selected').val());
}

それでおしまい！選択ボックスの代わりにdivをスタイルするだけです。私は上記のコードをテストしていないので、おそらくそれを微調整する必要があります。しかし、うまくいけば、あなたは要点を理解することができます。

この解決策は勝ると思います{-webkit-appearance: none;}。ブラウザがせいぜい何をすべきかは、フォーム要素との相互作用を指示することですが、サイトのデザインに影響を与えるため、ページに最初にどのように表示されるかは間違いありません。

この方法を試してください：

-webkit-appearance: button;
-moz-appearance: button;

次に、別の画像を背景として使用して配置できます。

background-image: url(images/select-arrow.png);
background-position: center right;
background-repeat: no-repeat;

mozブラウザには別の方法があります：

text-indent:10px;

選択する幅を定義している場合、このプロパティは選択領域の下のデフォルトのドロップボックスボタンを押します。

わたしにはできる！;）

完全な解決策ではありませんが、私はそれを見つけました…

-moz-appearance: window;

…ある程度は機能します。背景（-colorまたは-image）を変更することはできませんが、要素をcolor：transparentで非表示にできます。完璧ではありませんが、それは出発点であり、システムレベルの要素をjs要素に置き換える必要はありません。

私はFF31と互換性のあるソリューションを見つけたと思います!!!
このリンクでよく説明されている2つのオプションを次に示します
。http

：//www.currelis.com/hiding-select-arrow-firefox-30.htmlオプション1を使用しました：Rodrigo-Ludgeroがこの修正をGithubにオンラインで含めて投稿しましたデモ。このデモをFirefox 31.0でテストしましたが、正しく動作しているようです。ChromeとIEでもテスト済み。これがhtmlコードです：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Custom Select</title>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="custom-select fa-caret-down">
            <select name="" id="">
                <option value="">Custom Select</option>
                <option value="">Custom Select</option>
                <option value="">Custom Select</option>
            </select>
        </div>
    </body>
</html>

そしてCSS：

.custom-select {
    background-color: #fff;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 0 2em;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 1;
}

.custom-select:hover {
    border-color: #999;
}

.custom-select:before {
    color: #333;
    display: block;
    font-family: 'FontAwesome';
    font-size: 1em;
    height: 100%;
    line-height: 2.5em;
    padding: 0 0.625em;
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    width: 1em;
    z-index: -1;
}

.custom-select select {
    background-color: transparent;
    border: 0 none;
    box-shadow: none;
    color: #333;
    display: block;
    font-size: 100%;
    line-height: normal;
    margin: 0;
    padding: .5em;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.custom-select select::-ms-expand {
    display: none; /* to ie 10 */
}

.custom-select select:focus {
    outline: none;
}
/* little trick for custom select elements in mozilla firefox  17/06/2014 @rodrigoludgero */
:-moz-any(.custom-select):before {
    background-color: #fff; /* this is necessary for overcome the caret default browser */
    pointer-events: none; 
    z-index: 1; /* this is necessary for overcome the pseudo element */
}

http://jsbin.com/pozomu/4/edit

それは私にとって非常にうまくいきます！

残念ながらこれは「何かおかしい」です。通常、Web作成者がフォーム要素を再設計する場所ではありません。多くのブラウザーでは、ユーザーが慣れ親しんだOSコントロールをユーザーに表示するために、意図的にスタイルを設定することができません。

ブラウザとオペレーティングシステムでこれを一貫して行う唯一の方法は、JavaScriptを使用して、 select要素を「DHTML」のものにです。

次の記事は、それを可能にする3つのjQueryベースのプラグインを示しています（少し古いですが、現在、最新のものを見つけることができませんでした）。

http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements#1

/* Try this in FF30+ Covers up the arrow, turns off the background */ 
/* still lets you style the border around the image and allows selection on the arrow */


@-moz-document url-prefix() {

    .yourClass select {
        text-overflow: '';
        text-indent: -1px;
        -moz-appearance: none;
        background: none;

    }

    /*fix for popup in FF30 */
    .yourClass:after {
        position: absolute;
        margin-left: -27px;
        height: 22px;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        content: url('../images/yourArrow.svg');
        pointer-events: none;
        overflow: hidden;
        border-right: 1px solid #yourBorderColour;
        border-top: 1px solid #yourBorderColour;
        border-bottom: 1px solid #yourBorderColour; 
    }
}

私はこのような選択をスタイリングしています

<select style="     -moz-appearance: radio-container;
                -webkit-appearance: none;
                 appearance: none;
">

テストしたすべてのバージョンのFF、Safari、Chromeで動作します。

IEで私は置きました：

 select::-ms-expand {
 display: none;
}
/*to remove in all selects*/

また、次のこともできます。.yourclass ::-ms-expand {display：none; } .yourid ::-ms-exapan {display：none; }

私はこの質問が少し古いことを知っていますが、それはグーグルで発生するので、これは「新しい」解決策です：

appearance: normal私にとってFirefox（現在のバージョン5）では問題なく動作するようです。OperaとIE8 / 9ではありません

OperaとIE9の回避策として、私は :before疑似セレクターを使用して新しい白いボックスを作成し、それを矢印の上に配置しました。

残念ながら、IE8ではこれはできません。ボックスは正しくレンダリングされますが、とにかく矢印が飛び出します...：-/

select:beforeOperaでの使用は正常に機能しますが、IEでは機能しません。開発者ツールを見ると、ルールを正しく読み取っており、それらを無視しています（取り消し線が引かれています）。ですので<span class="selectwrap">、実際の辺りを使用してい<select>ます。

select {
  -webkit-appearance: normal;
  -moz-appearance: normal;
  appearance: normal;
}
.selectwrap { position: relative; }
.selectwrap:before {
  content: "";
  height: 0;
  width: 0;
  border: .9em solid red;
  background-color: red;
  position: absolute;
  right: -.1em;
  z-index: 42;
}

これを少し調整する必要があるかもしれませんが、これは私にとってはうまくいきます！

免責事項： これを使用して、フォームを含むWebページの見栄えの良いハードコピーを取得しているので、2番目のページを作成する必要はありません。私は1337 haxx0rではありません。赤いスクロールバー、<marquee>タグ、その他を必要としています:-) 十分な理由がない限り、フォームに過度のスタイルを適用しないでください。

pointer-eventsプロパティを使用します。

ここでのアイデアは、ネイティブのドロップダウン矢印の上に要素をオーバーレイし（カスタムドロップダウン矢印を作成するため）、その上でのポインターイベントを許可しないことです。[ この投稿を参照]

このメソッドを使用した作業中のFIDDLEを次に示します。

また、このSOの回答では、これと別の方法について詳しく説明しました。

これは動作します（Firefox 23.0.1でテスト済み）：

select {
    -moz-appearance: radio-container;
}

@JoãoCunhaの回答に基づいて、複数のブラウザに役立つ1つのCSSスタイル

select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
    text-indent: 0.01px;
    text-overflow: '';
}
/*for IE10*/
select::-ms-expand {
    display: none;
}

さらにジョアン・クーニャの答えは、この問題は、今あるMozillaのToDoの一覧にし、35版を対象としています。

Cunhaのブログで参照されているTodd Parkerによる回避策は次のとおりです。

http://jsfiddle.net/xvushd7x/

HTML：

<label class="wrapper">This label wraps the select
    <div class="button custom-select ff-hack">
        <select>
            <option>Apples</option>
            <option>Bananas</option>
            <option>Grapes</option>
            <option>Oranges</option>
            <option>A very long option name to test wrapping</option>
        </select>
    </div>
</label>

CSS：

/* Label styles: style as needed */
label {
  display:block;
  margin-top:2em;
  font-size: 0.9em;
  color:#777;
}

/* Container used for styling the custom select, the buttom class below adds the bg gradient, corners, etc. */
.custom-select {
  position: relative;
  display:block;
  margin-top:0.5em;
  padding:0;
}

/* These are the "theme" styles for our button applied via separate button class, style as you like */
.button {
  border: 1px solid #bbb;
  border-radius: .3em;
  box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
  background: #f3f3f3; /* Old browsers */
  background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
  background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
}

/* This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */
.custom-select select {
  width:100%;
  margin:0;
  background:none;
  border: 1px solid transparent;
  outline: none;
  /* Prefixed box-sizing rules necessary for older browsers */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* Remove select styling */
  appearance: none;
  -webkit-appearance: none;
  /* Font size must the 16px or larger to prevent iOS page zoom on focus */
  font-size:16px;
  /* General select styles: change as needed */
  font-family: helvetica, sans-serif;
  font-weight: bold;
  color: #444;
  padding: .6em 1.9em .5em .8em;
  line-height:1.3;
}


/* Custom arrow sits on top of the select - could be an image, SVG, icon font, etc. or the arrow could just baked into the bg image on the select. Note this si a 2x image so it will look bad in browsers that don't support background-size. In production, you'd handle this resolution switch via media query but this is a demo. */

.custom-select::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 8px;
  top: 50%;
  right: 1em;
  margin-top:-4px;
  background-image: url(http://filamentgroup.com/files/select-arrow.png);
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 2;
  /* These hacks make the select behind the arrow clickable in some browsers */
  pointer-events:none;
}


/* Hover style */
.custom-select:hover {
  border:1px solid #888;
}

/* Focus style */
.custom-select select:focus {
  outline:none;
  box-shadow: 0 0 1px 3px rgba(180,222,250, 1);
  background-color:transparent;
  color: #222;
  border:1px solid #aaa;
}

/* Set options to normal weight */
.custom-select option {
  font-weight:normal;
}

Firefox 35以降、 "-moz-appearance:noneすでにコードに記述した "は、必要に応じて最後に矢印ボタンを削除します。

それはそのバージョン以来解決されたバグでした。

あちこちでたくさんの議論が起こっていますが、この問題に対する適切な解決策が見当たりません。最後に、IEとFirefoxでこのHACKを実行するための小さなJquery + CSSコードを作成することで終わりました。

Jqueryを使用して要素の幅（SELECT要素）を計算します。選択要素の周囲にラッパーを追加し、この要素のオーバーフローを非表示にします。このラッパーの幅がappoxであることを確認してください。SELECT要素より25px少ない。これはJqueryで簡単に実行できます。だから今私たちのアイコンはなくなっています。SELECT要素に画像アイコンを追加する時がきました... !!! 背景を追加するための簡単な行をいくつか追加するだけで、すべて完了です。外側のラッパーには、オーバーフローを非表示にしてください。

以下は、Drupal用に作成されたコードのサンプルです。ただし、Drupal固有のコードを数行削除することで、他のユーザーにも使用できます。

/*
 * Jquery Code for Removing Dropdown Arrow.
 * @by: North Web Studio
 */
(function($) {
  Drupal.behaviors.nwsJS = {
    attach: function(context, settings) {
      $('.form-select').once('nws-arrow', function() {
        $wrap_width = $(this).outerWidth();
        $element_width = $wrap_width + 20;
        $(this).css('width', $element_width);
        $(this).wrap('<div class="nws-select"></div>');
        $(this).parent('.nws-select').css('width', $wrap_width);
      });
    }
  };
})(jQuery);

/*
 * CSS Code for Removing Dropdown Arrow.
 * @by: North Web Studio
 */

.nws-select {
  border: 1px solid #ccc;
  overflow: hidden;
  background: url('../images/icon.png') no-repeat 95% 50%;
}
.nws-select .form-select {
  border: none;
  background: transparent;
}

ソリューションはすべてのブラウザーIE、Chrome、Firefoxで機能しますCSSを使用して固定幅ハックを追加する必要はありません。それはすべて、JQueryを使用して動的に処理されます。

詳細：-http : //northwebstudio.com/blogs/1/jquery/remove-drop-down-arrow-html-select-element-using-jquery-and-css

このCSSを試してください

select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
}

その働き

appearanceCSS3 のプロパティはnone値を許可しません。見てくださいW3Cの参照を。したがって、あなたがしようとしていることは有効ではありません（実際、Chromeも受け入れるべきではありません）。

その場合、残念ながら、純粋なCSSを使用してその矢印を非表示にするクロスブラウザソリューションは実際にはありません。指摘したように、JavaScriptが必要になります。

selectBox jQueryプラグインの使用を検討することをお勧めします。それは非常に軽量で、うまくできています。

ボックスの幅を広げて、矢印を矢印の左側に近づけることができます。これにより、矢印を空の白いdivで覆うことができます。

見てください：http : //jsbin.com/aniyu4/86/edit

HTMLへの小さな変更を受け入れますか？

selectタグを含むdivタグを置くようなものです。

見てください。

または、選択範囲をクリップできます。以下に沿ったもの：

select { width:200px; position:absolute; clip:rect(0, 170px, 50px, 0); }

これにより、選択ボックスの右側の30pxがクリップされ、矢印が取り除かれます。170pxの背景画像とスタイルの選択を提供します

それは巨大なハック-moz-appearance: menulist-textですが、トリックを行うかもしれません。

私は同じ問題を抱えていました。FFとChromeで動作させるのは簡単ですが、IE（サポートする必要がある8以上）では物事が複雑になります。IE8を含め、「どこで試しても」機能するカスタム選択要素に対して私が見つけることができる最も簡単なソリューションは、.customSelect（）を使用することです。

私にとって便利なハックは、（選択）表示をに設定することinline-flexです。選択ボタンから矢印を切り取ります。追加されたすべてのコードなし。

• Fxのみ。-webkit appearanceChromeなどにはまだ必要です...

ジョーダン・ヤングの答えが一番です。ただし、HTMLを変更できない場合、または変更したくない場合は、Chrome、Safariなどに提供されているカスタムの下矢印を削除して、Firefoxのデフォルトの矢印を残してください。ただし、二重矢印は表示されません。理想的ではありませんが、HTMLを追加せず、他のブラウザーでのカスタムの外観を損なうことのない優れたクイックフィックスです。

<select>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

CSS：

select {
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

@-moz-document url-prefix() {
  select {
    background-image: none;
  }
}

hackity hack ...私がテストしたすべてのブラウザー（Safari、Firefox、Chrome）で機能するソリューション。IEを配置しないでください。テストしてコメントできると便利です。

<div class="wrapper">
  <select>
    <option>123456789</option>
    <option>234567890</option>
  </select>
</div>

CSS、URLエンコードされた画像：

.wrapper { position:relative; width:200px; }
.wrapper:after {
  content:"";
  display: block;
  position: absolute;
  top:1px; height:28px;
  right:1px; width:16px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAcCAYAAACH81QkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowODgwMTE3NDA3MjA2ODExOEE2RENENTU2MTFGMEQ1RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGNDE5NDQ3Nzc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGNDE5NDQ3Njc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDk4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDg4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4o7anbAAAAjklEQVR42uzUsQ3EIAwFUPty7MBOsAoVC7EVYgyUSFcdzn0iJYquAZGSLxnLzatsWERWGsvGP0QGkc+LxvN9AqGJTKQJMcYQM/+VtbZdiTGKUgr3cxbmlJI0ZiW83vsbgrkjB5JzFq11BdAxdyNICKEi6J25kFKKOOdq70We+JS2ufYTacjyxrKMLtsuwAAznzqGLHX9BwAAAABJRU5ErkJggg==);

  pointer-events: none;
}

select {
  width: 100%;
  padding:3px;
  margin: 0;
  border-radius: 0;
  border:1px solid black;
  outline:none;
  display: inline-block;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
  float:none!important;
  background:white;

  font-size:13px;
  line-height: 1em;
  height: 30px;
  padding:6px 20px 6px 10px;
}

http://codepen.io/anon/pen/myPEBy

：after-elementを使用して醜い矢印をカバーしています。selectは：afterをサポートしていないので、使用するラッパーが必要です。これで、矢印をクリックしても、ドロップダウンはそれを登録しません...ブラウザがpointer-events: noneIE10-を除くすべてのユーザーがサポートしている場合を除いて、http：//caniuse.com/#feat=pointer-events

だから私にとっては完璧です-少なくともjavascriptを含む他のすべてのオプションと比較して、すてきでクリーンで頭痛の少ないソリューションです。

tl; dr：

IE10（またはそれ以下）のユーザーが矢印をクリックしても機能しません。私には十分に機能します...

JSをいじるのを気にしないのであれば、私はあなたがそれを行うのを助ける小さなjQueryプラグインを書きました。これにより、ベンダープレフィックスについて心配する必要はありません。

 $.fn.magicSelectBox = function() {
  var $e = this;

  $e.each(function() {
    var $select = $(this);

    var $magicbox = $('<div></div>').attr('class', $select.attr('class')).attr('style', $select.attr('style')).addClass('magicbox');
    var $innermagicbox = $('<div></div>').css({
      position: 'relative',
      height: '100%'
    });
    var $text = $('<span></span>').css({
      position: 'absolute'
    }).text($select.find("option:selected").text());

    $select.attr('class', null).css({
      width: '100%',
      height: '100%',
      opacity: 0,
      position: 'absolute'
    }).on('change', function() {
      $text.text($select.find("option:selected").text());
    });

    $select.parent().append($magicbox);
    $innermagicbox.append($text, $select);
    $magicbox.append($innermagicbox);
  });

  return $e;
};

ここでフィドル： JSフィドル

選択は最初からスタイルを設定する必要があります（これは背景と境界線を設定することを意味します）が、とにかくこれを実行したい場合があります。

また、この関数は元の選択をdivに置き換えているため、CSSの選択セレクターで直接行われたスタイル設定はすべて失われます。そのため、select要素にクラスを指定し、クラスのスタイルを設定します。

ほとんどの最新のブラウザーをサポートします。古いブラウザーをターゲットにしたい場合は、古いバージョンのjQueryを試すことができますが、おそらく関数でon（）をbind（）に置き換える必要があります（テストされていません）

他の回答はうまくいかなかったようですが、このハックを見つけました。これは私のために働きました（2014年7月）

select {
-moz-appearance: textfield !important;
    }

私の場合、woocommerce入力フィールドもあるので、これを使用しました

.woocommerce .quantity input.qty {
-moz-appearance: textfield !important;
 }

入力ではなく選択を表示するように私の答えを更新しました