ドロップダウンリストからデフォルトの矢印アイコンを削除する方法(要素を選択)?


297

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

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

Opera、Firefox、Internet Explorerでそれを行う方法

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


Firefoxでそれを隠すためにいくつかの答え/ハック- stackoverflow.com/questions/5912791/...
andyb

2
外観 #slectType { -webkit-appearance: none; appearance: none /*menulist*/ !重要な; max-width: 300px; line-height: 0px;} input[type='text'], select {max-height: 30px;max-width: 300px; text-align-last: center; /*text-indent: 5px;*/} button:hover {color: #FFF;background-color: #566977;box-shadow:none;border-color: #759AB5;} #errorMSG{z-index: 2147483647;}参照[CH:-webkit、FF:-moz、IE:-ms、Oprea:-o];
Yash

1
IE
Muath

回答:


383

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

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

22
問題はIEでドロップダウン矢印を削除する方法でした。IE9にはこの機能はありませんが、IE10では機能します。したがって、Windows XPを使用していない限り、とにかくIE10を使用する必要があります。IE11は間もなくリリースされます。他のオプションは、実際のドロップダウンボタンを非表示にして独自に作成するための醜いCSSハックです。
nrutas 2013年

2
ここにリンクがあります。オーバーフローを隠すための醜いハックです
nrutas

1
IE11で動作します。グラシアス!
ConorLuddy 2017年

これはFirefoxでは機能しませんでした。以下のFirefoxのVarun Rathoreのソリューションを使用してください。
AlmostPitt 2017年

1
これはIE専用です。もちろん、Firefoxでは動作しません。
nrutas

289

前述のソリューションは、Chromeでは適切に機能しますが、Firefoxでは機能しません。

ChromeとFirefox(IEではない)の両方でうまく機能するソリューションを見つけました。SELECT要素のCSSに次の属性を追加し、必要に応じてmargin-topを調整します。

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

お役に立てれば :)


9
このトリックは、Firefoxのバージョン31(2014年5月のNightlyビルド)では動作しなくなりました。その間に何ができるか見てみましょう。私が書いたこの要旨は、完全な内幕を持っていますgist.github.com/joaocunha/6273016
ジョアン・クーニャ

JoäoCunhaの方法を確認し、成功裏に使用しました。チェックアウトしたら、Firefoxでリンクを開くことを忘れないでください。
NoobishPro

それは私のために働いた。私はそれをwkhtmltopdfに使用してhtmlからpdfを生成したいと思っていました。ありがとう
ファイサル

187

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

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>


4
appearance: noneはChromeとFirefox Quantum(v59以降)で使用しました。つまりベンダープレフィックスはもう必要ありません
CPHPython 2018年

2
@CPHPythonこのコメントの時点で、ほとんどのブラウザにはまだ「プレフィックス付きの部分的なサポート」タグが付いています...
Dan

2
@CPHPythonプレフィックスなしで機能させるには、プロジェクトにAutoprefixerをインストールする必要がありますappearance: none。ほとんどのブラウザはまだ接頭辞を必要とします。
Daniel Tonon

@DanielTononああ、たぶん私はそのようないくつかのpostcssパッケージを使用していました。正確には覚えていませんが、コメントする前にブラウザのインス​​ペクタをチェックしたと思います。
CPHPython 2018年

58

これを試して :

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/


1
JSBinをIEとFirefoxでテストしましたか?どちらにも組み込みのドロップダウン矢印が表示されます。
マーティン・スミス

Choosenで確認してください。これが最良の選択だと思います。
EpokK 2013年

「Internet Explorerをご利用の場合」?あなたは関係なく、彼らのためにIEと応じるを使用しています人口の大%を考慮する必要がある
ダニー・マホーニー

当社のサイトのユーザー統計は次のとおりです:5.21%IEまたは2.37%エッジ
ニューエベレスト

「IEを使用している場合」が正しい場合は、「IEをサポートする必要がある場合」の方が適していますが、この時代では、Webを実行している場合、テクノロジーは適切に対象ユーザーに向けられるはずです。開発者をターゲットにしたWebサイトでは、IEのすべてのバージョンをサポートする必要があるとは思いません。
Brandito 2018

17

これを試して:

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;
}

15

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

<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>

非表示にすることはできませんが、オーバーフローを非表示にすると、実際に非表示にすることができます。


6

スレッドを完成させたかっただけです。明確にするために、これは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;
}

5

私が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;
}

4
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;

}


2

これは、完全に機能するクロスブラウザーサポートでは実行できません。

50ピクセルのdivを取得して、この右側にある任意のドロップダウンアイコンをフロートさせてみてください。

次に、そのdiv内に、おそらく55ピクセルの幅(コンテナーの幅よりも大きいもの)の選択タグを追加します。

私はあなたが望むものを手に入れると思います。

右側にドロップアイコンが必要ない場合は、右側の画像をフローティングにする以外のすべての手順を実行してください。selectタグのfocusにoutline:0を設定します。それでおしまい


1
私はこれらのヒントから助けを得ることができません。誰かがここで適切なコードを与えることができますか?ありがとうございました。
user2301515 2013年

2

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


2

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

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>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.