選択した矢印を隠す/表示する

私の検索にもかかわらず、矢印を削除または隠しているがホバー上に表示していないという関連する問題が見つかりました。選択した矢印を隠す/表示する

最終目標は、最新の主要なブラウザ、Edge、Chrome、IE 11のHTML Select Arrowを非表示にして、マウスを動かしたときに表示することです。

今はIE 11で完全に次のコードで動作させることができましたが、ChromeとEdgeでは正常に動作しません。このコードを変更したり追加したりして、クロスブラウザーにするための洞察はありますか？

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

 
select { 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
} 
 

 
select:hover { 
 
    -webkit-appearance: menulist; 
 
    -moz-appearance: menulist; 
 
} 
 
select:hover::-ms-expand { 
 
    display: block; 
 
}

<select> 
 
    <option>Marc Roussel</option> 
 
    <option>Gilles Lavoie</option> 
 
    <option>Roger Maheu</option> 
 
</select>

出典

2016-10-12 Marc Roussel

使用-webkit-appearance: menulist。現代のブラウザの場合またはappearance: none：

全体のリストについては、http://trentwalton.com/2010/07/14/css-webkit-appearance/を参照してください。

[IMO、ユーザの観点から、標準と「正常な」何かをオンにする奇妙な要件だと具体的な驚くべきものには]

出典

2016-10-12 12:43:02 Xenos

これは、50％の作業です。他のブラウザがスタイルを維持している間にChromeがテキストボックス部分全体を変更する理由すべての主要なブラウザですべてが同じである必要があります。この要件は、これをグリッドに表示するための要件です。このコントロールを持つ列のすべての行にこの矢印を付けることは望ましくありません。 –

'-webkit-'ルールはWebkitブラウザ（Opeara、Chrome）にのみ適用されます。他は影響を受けません。私はここにエッジがないので、そのブラウザをチェックすることはできません。このようなグリッドを持っていても、モバイル/タブレットではデバイスによって矢印が表示されないことがさらに分かります。 – Xenos

はい、確かにこれは私が知っているものです-webkit- もう一つ注目すべきことは、IE 11ではそれがうまくいきます。選択がクリックされた後、ドキュメントの別の場所をクリックすると、矢印が完全には隠されていますが、Edgeではmenulistソリューションが矢印を他の場所をクリックした後に残すようにします –

選択した矢印を隠す/表示する

答えて

関連する問題