344

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

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

Opera、Firefox、および Internet Explorer でそれを行う方法は?

ここに画像の説明を入力

4

14 に答える 14

417

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

select::-ms-expand {
    display: none;
}
于 2013-09-18T17:24:38.503 に答える
352

前述のソリューションは chrome ではうまく機能しますが、Firefox ではうまく機能しません。

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

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
}
<select>
  <option>one</option>
  <option>two</option>
  <option>three</option>

</select>

于 2013-12-09T06:55:06.917 に答える
235

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

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>

于 2015-09-17T06:13:54.923 に答える
66

これを試して ：

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

JSビン： http: //jsbin.com/aniyu4/2/edit

Internet Explorer を使用している場合:

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

または、 Choosen を使用できます: http://harvesthq.github.io/chosen/

于 2013-05-17T07:47:04.777 に答える
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;
}
于 2013-10-07T11:49:38.727 に答える
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>

非表示にすることはできませんが、overflow hidden を使用すると実際に非表示にすることができます。

于 2014-08-06T18:27:19.973 に答える
7

スレッドを完成させたかっただけです。非常に明確にするために、これは 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;
}
于 2014-03-28T20:23:05.433 に答える
2

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

于 2014-10-29T00:02:51.947 に答える
2

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

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

そのdiv内に、おそらく55ピクセルの幅のselectタグを追加します（コンテナの幅よりも大きい）

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

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

于 2013-05-17T07:48:56.177 に答える
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>
于 2016-04-16T01:04:08.453 に答える