web-dev-qa-db-ja.com

ドロップダウンリストからデフォルトの矢印アイコンを削除する方法（select要素）

HTMLの<select>要素からドロップダウンの矢印を削除したいです。例えば：

<select style="width:30px;-webkit-appearance: none;">
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    ...
</select>

Opera、Firefox、Internet Explorerでそれをするには？

enter image description here

htmlcssdrop-down-menuhtml-select
233
user2301515

ハッキングやオーバーフローは必要ありません。 IEのドロップダウン矢印には擬似要素があります。

select::-ms-expand {
    display: none;
}
332
nrutas

前述の解決策は、Chromeではうまくいきますが、Firefoxではうまくいきません。

Solution がChromeとFirefoxの両方で（IEではなく）うまく動作することを発見しました。 SELECT要素のCSSに次の属性を追加し、必要に応じて余白を調整します。

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

お役に立てれば ：）

230
Varun Rathore

選択からドロップダウン矢印を削除する簡単な方法 /

select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

/* For IE10 */
select::-ms-expand {
  display: none;
}
<select>
  <option>2000</option>
  <option>2001</option>
  <option>2002</option>
</select>
136
Sangeet Shah

これを試して ：

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 2px 30px 2px 2px;
    border: none;
}

JS Bin： http://jsbin.com/aniyu4/2/edit

Internet Explorerを使用している場合

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

またはChoosenを使用することができます： http://harvesthq.github.io/chosen/

53
EpokK

これを試して：

HTML：

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

CSS：

.customselect {
    width: 70px;
    overflow: hidden;
}

.customselect select {
   width: 100px;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}
16
Luke Kalyan Brata Sarker

これを試してみてください

<style>
    select{
        border: 0 !important;  /*Removes border*/
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        text-overflow:'';
        text-indent: 0.01px; /* Removes default arrow from firefox*/
        text-overflow: "";  /*Removes default arrow from firefox*/
    }
    select::-ms-expand {
        display: none;
    }
    .select-wrapper
    {
        padding-left:0px;
        overflow:hidden;
    }
</style>
    
<div class="select-wrapper">
     <select> ... </select>
</div>

隠すことはできませんが、オーバーフロー隠しを使用すると、実際に隠すことができます。

14
Mahesh Shitole

スレッドを完成させたいだけでした。非常に明確にするために、これはIE9では機能しませんが、少しCSSトリックで実行できます。

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

.customselect {
    width: 80px;
    overflow: hidden;
   border:1px solid;
}

.customselect select {
   width: 100px;
   border:none;
  -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}
6
sun2

私が答えたように IEの選択矢印を削除

あなたがクラスと擬似クラスを使いたい場合：

.simple-controlはあなたのCSSクラスです

:disabledは疑似クラスです

select.simple-control:disabled{
         /*For FireFox*/
        -webkit-appearance: none;
        /*For Chrome*/
        -moz-appearance: none;
}

/*For IE10+*/
select:disabled.simple-control::-ms-expand {
        display: none;
}
5
Tejasvi Hegde
select{
padding: 11px 50px 11px 10px;
background: rgba(255,255,255,1);
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #8ba2d4;

}

3
Mitul

あなたは完全に機能的なクロスブラウザサポートでこれをすることができません。

50ピクセルのdivを取ってみて、この右側に希望のドロップダウンアイコンを浮かせてください。

そのdiv内に、多分55ピクセルの幅のselectタグを追加します（コンテナの幅以上のもの）

欲しいものが手に入ると思います。

右側にドロップアイコンを表示したくない場合は、右側に画像を移動する以外のすべての手順を実行してください。選択タグのアウトラインを0に設定します。それでおしまい

2
A100WebSolutions

dropKick.jsと呼ばれるライブラリがあります。これは通常の選択ドロップダウンをHTML/CSSに置き換えます。そのため、それらをjavascriptで完全にスタイル設定および制御できます。 http://dropkickjs.com/ /

2
nrutas

すべてのブラウザとすべてのバージョンで動作します。

_ js _ 

jQuery(document).ready(function () {    
    var widthOfSelect = $("#first").width();
    widthOfSelect = widthOfSelect - 13;
    //alert(widthOfSelect);
    jQuery('#first').wrap("<div id='sss' style='width: "+widthOfSelect+"px; overflow: hidden; border-right: #000 1px solid;' width=20></div>");
});

_ html _ 

<select class="first" id="first">
  <option>option1</option>
  <option>option2</option>
  <option>option3</option>
</select>
1
SK.