4

以下のコードを使用したFirefoxのデフォルトの選択ボックスの矢印を削除する必要があります

-webkit-appearance: none;
-moz-appearance:none; 
background: rgba(0,0,0,0);

クロムでうまく機能します。しかし、Firefoxでは機能しません。

4

6 に答える 6

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/joaounha/RUEbp/1/

この件に関する詳細: https://gist.github.com/joaocunha/6273016

于 2013-08-25T13:44:12.603 に答える
1

これを処理するには、次のようにします。1) HTML は次のようになります。

<div class="select-box">
    <select>
        <option>Mozilla Firefox</option>
        <option>Google Chrome</option>
        <option>Apple Safari</option>
        <option>Internet Explorer</option>
    </select>
</div>

2) CSS は次のようになります。

.select-box select{width:100%}
/* For Microsoft IE */
select::-ms-expand {    display: none; }

/* For Webkit based browsers Google Chrome, Apple Safari and latest Gecko browsers */
select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

それを試してみてください。これが役立つことを願っています。すべてのバージョンではないにしても、Firefox、Chrome、つまり、Safari の最新バージョンで作業しています。ただし、すべてのブラウザのすべてのバージョンを確認してください。

于 2015-07-08T13:07:13.420 に答える
0

特に Linux と Mac OS のバージョンでは、Firefox でそれを行う簡単な方法はないと思います。選択ボックスの不透明度を 0 に変更し、div/span を使用して選択ボックスを含めます。その後、そのコンテナにいくつかのスタイルを追加します。これは推奨されない回避策であり、選択ボックスのスタイルのみを変更したい場合はコストがかかりすぎます。ただし、とにかく問題を解決します。お役に立てれば。=)

オリジナル:

<select>
    <option>Value 1</option>
    <option>Value 2</option>
</select>

新しい：

<span class="select-container">
    <select>
        <option>Value 1</option>
        <option>Value 2</option>
    </select>
</span>

スタイル：

.select-container {
    width: 100px;
    height: 30px;
    position: relative;
    border: 1px solid #ccc;
    background: url("path of the arrow image") no-repeat right center;
    background-size: 25px;
}
select {
    position: absolute;
    opacity: 0;
    outline: 0;
}

次に、Javascript を追加して、選択した値をコンテナに表示します。

于 2013-09-16T09:53:34.833 に答える
0

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

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

/*for IE10*/
select::-ms-expand {
    display: none;
}
<select>
 <option>India</option >
 <option>India</option >
 <option>India</option >    
</select>

于 2015-09-17T06:21:52.133 に答える
-1

gcyrillusは、この Web サイトでこの問題の適切な解決策を提案しています。

http://css-tricks.com/forums/topic/remove-select-arrow-for-chrome-and-firefox/

于 2014-12-19T10:08:35.427 に答える