Firefoxでselect要素から矢印を削除する方法
私はCSS3を使ってselect要素をスタイルしようとしています。私は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;
}
あなたが見ることができるように、私は空想何のためにもしていません。デフォルトのスタイルを削除して自分のドロップダウン矢印を追加するだけです。私が言ったように、WebKitは素晴らしいが、Firefoxは素晴らしい。どうやら、-moz-appearance: noneはドロップダウンアイテムを取り除きません。
何か案は？いいえ、JavaScriptはオプションではありません
さて、私はこの質問が古いことを知っていますが、2年経ってもmozillaは何もしていません。
私は簡単な回避策を考え出しました。
これは基本的にはFirefoxの選択ボックスのすべてのフォーマットを取り除き、カスタムスタイルで選択ボックスを囲むspan要素をラップしますが、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を修正して、mozillaの汚れた矢印を-moz-appearance：windowで隠して、カスタム矢印をスパンのクラス 'css-select-moz'に入れます。
.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時間前にこのバグに遭遇しただけで結構クールです（私はWebdesignの初心者で、まったく独学です）。しかし、このコミュニティは間接的に多くの助けを私に提供してくれました。
私はFirefox（Mac）のバージョン18、そして22（それが更新された後）でそれをテストしました。
すべてのフィードバックは大歓迎です。
更新：これはFirefox v35で修正されました。詳しくは full Gist を参照してください。
Firefoxから選択矢印を削除する方法を考え出しただけです。トリックは-prefix-appearance、text-indentおよびtext-overflowの組み合わせを使うことです。これは純粋なCSSであり、特別なマークアップを必要としません。
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Windows 8、Ubuntu、Mac、Firefoxの最新バージョンでテスト済み。
私にとってうまくいくトリックは、選択幅を100％以上にしてオーバーフローを適用することです：hidden
select {
overflow:hidden;
width: 120%;
}
これがFFのドロップダウン矢印を隠す唯一の方法です。
ところで。あなたが美しいドロップダウンを使用したいのであれば http://harvesthq.github.com/chosen/
重要なアップデート：
Firefox V35以降、appearanceプロパティが機能するようになりました。
V35に関する firefoxの公式リリースノート から：
コンボボックスで
none値を指定して-moz-appearanceを使用すると、ドロップダウンボタンが削除されるようになりました（バグ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で簡単にできること：
$('.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
それは私にとってとてもうまくいきます！
/* 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;
}
}
あなたにとって残念なことに、これは「なにか空想」です。通常、Web作者がフォーム要素を再設計する場所ではありません。ユーザーが慣れ親しんだOSコントロールを見ることができるようにするために、多くのブラウザでは意図的にスタイルを設定できません。
ブラウザやオペレーティングシステムでこれを一貫して行う唯一の方法は、JavaScriptを使用してselect要素を "DHTML"要素に置き換えることです。
以下の記事は、それを可能にする3つのjQueryベースのプラグインを示しています（それは少し古くなっていますが、現在最新のものは見つかりませんでした）。
http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements#1
私はちょうどこれが好きなセレクトをスタイリングしています
<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;} }
@JoãoCunhaによる回答に基づいて作成された、1つ以上のブラウザに役立つ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;
}
これは動作します（Firefox 23.0.1でテスト済み）。
select {
-moz-appearance: radio-container;
}
たくさんの議論があちこちで起こっています、しかし、私はこの問題のためのある適切な解決策を見ません。最後にIE＆FirefoxでこのHACKを実行するための小さなJquery + CSSコードを書くことで終わりました。
Jqueryを使用して要素幅（SELECT要素）を計算します。選択要素の周囲にラッパーを追加し、この要素に対してオーバーフローを非表示にしたままにします。このラッパーの幅がおよそであることを確認してください。 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;
}
その働き
Joao Cunha's answer にさらに近づくと、この問題は MozillaのToDoリストに載っています となり、ver 35を対象としています。
欲しい人のために、Cunhaのブログで紹介されているTodd Parkerによる回避策が今日ここにある。
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"は既にコードに書いてあるので、最後に必要に応じて矢印ボタンを削除してください。
そのバージョンから解決された バグ でした。
私はこの質問が少し古いことを知っていますが、それはグーグルで判明したので、これは「新しい」解決策です：
appearance: normalは、Firefoxでうまく機能しているようです（バージョン5）。 OperaおよびIE8/9にはありません
OperaおよびIE9の回避策として、:before疑似セレクターを使用して新しい白いボックスを作成し、それを矢印の上に配置しました。
残念ながら、IE8ではこのは機能しません。ボックスは正しくレンダリングされますが、とにかく矢印が突き出ています...：-/
Operaではselect:beforeを使用しても問題なく動作しますが、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番目のページを作成する必要はありません。私は赤いスクロールバー、<Marquee>タグ、その他何も必要としない1337 haxx0rではありません:-)do not非常に正当な理由。
pointer-eventsプロパティを使用してください。
ここでの考え方は、要素をネイティブのドロップダウン矢印の上にオーバーレイし（カスタムのものを作成する）、その上にポインタイベントを許可しないことです。 [ この投稿 を参照]
これがFIDDLEという方法です。
また、 this SO answer でこれと他の方法について詳しく説明しました。
または、あなたは選択をクリップすることができます。次の行に沿った何か
select { width:200px; position:absolute; clip:rect(0, 170px, 50px, 0); }
これで、選択ボックスの右側の30ピクセルを切り取り、矢印を取り除きます。今度は170px背景画像と必要に応じてスタイルを選択してください。
CSS3のappearanceプロパティでは、noneの値は許可されていません。 W3Cリファレンス を見てください。だから、あなたがやろうとしていることは有効ではありません（実際にはChromeも受け入れてはいけません）。
残念ながら、純粋なCSSを使用してこの矢印を隠すためのクロスブラウザソリューションはありません。指摘したように、JavaScriptが必要になります。
selectBox jQuery plugin の使用を検討することをお勧めします。非常に軽量で、うまくできています。
あなたが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 Fiddle
条件は、最初から選択をスタイル設定する必要があるということです（これは背景と境界を設定することを意味します）が、とにかくこれをしたいのです。
また、この関数は元の選択をdivに置き換えるので、CSSの選択セレクタで直接行われたスタイルは失われます。そのため、select要素にクラスを与え、そのクラスにスタイルを設定します。
あなたがより古いブラウザをターゲットにしたいなら、あなたはより古いバージョンのjQueryを試すことができますが、おそらくテストされていない関数でbind（）でon（）を置き換えなければなりません
私にとって便利なハックは、（選択）表示をinline-flexに設定することです。選択ボタンの外側にある矢印を切り取ります。追加されたコードすべてなしで。
- Fx専用です。
-webkit appearanceはまだChromeなどに必要です...
ボックスの幅を広げて、矢印を矢印の左側に移動させることができます。これで空の白いdivで矢印を隠すことができます。
見てください： http://jsbin.com/aniyu4/86/edit
ジョーダンヤングの答えは最高です。しかし、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;
}
}
私は同じ問題を抱えていました。 FFとChromeで動作させるのは簡単ですが、IE（8 +をサポートする必要があります）では、事態は複雑になります。 IE 8を含め、「どこでも試した」動作するカスタムのselect要素を見つけるための最も簡単な解決策は、 。customSelect（） を使用することです。
これは大きなハックですが、-moz-appearance: menulist-textがうまくいくかもしれません。
hackity hack ...私がテストしたすべてのブラウザ（Safari、Firefox、Chrome）で機能するソリューション。 IEの周りに横たわっていないので、あなたがテストしてコメントすることができればそれはいいだろう：
<div class="wrapper">
<select>
<option>123456789</option>
<option>234567890</option>
</select>
</div>
URLエンコードされた画像を含むCSS
.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はサポートしていないので：あとで、作業するためのラッパーが必要です。さて、あなたが矢印をクリックすると、ドロップダウンはそれを登録しないでしょう...あなたのブラウザがIE10-を除いて誰もがするpointer-events: noneをサポートしない限り： http://caniuse.com/#feat=pointer-イベント
だから私にとっては完璧です - 少なくともJavaScriptを含む他のすべてのオプションと比較して、すてきで、きれいで、頭痛の少ないソリューションです。
tl; dr：
IE10（またはそれ以下）のユーザーが矢印をクリックしても機能しません。私のために十分に動作します...