HTML隐藏用css选择下拉箭头 [英] HTML hide Select drop down arrow with css

问题描述

有没有一种好方法可以隐藏所有浏览器的默认下拉箭头？我知道这个问题已经被问过几次了，但似乎并没有解决方案能够适用于所有浏览器，并且它们都不太好看。几年已经过去了，我想知道现在是否存在一个很好的解决方案？

解决方案

  select ::  -  ms-expand 
 {
 display：none; 
} 
选择
 {
 -webkit-appearance：none; 
 -moz-appearance：none; 
外观：无; 
 padding：2px 30px 2px 2px; 
 / * border：none; - 如果你想删除边框* / 
} 
  

这适用于Chrome和IE。

不幸的是，您的情况 -moz-appearance：none 似乎目前尚未得到完全支持。

这里有一个错误： https://bugzilla.mozilla.org /show_bug.cgi?id=649849 ，它具有已解决的固定状态，但似乎依赖于另一个错误： https://bugzilla.mozilla.org/show_bug.cgi?id=1076846 ，它有一个新的状态，所以希望它很快就会被修复。

Is there a good way hide the default drop down arrow for all browsers? I know the question has been asked couple times but there does NOT seem to be a solution which would work for all browsers and neither of them look nice. Couple years has passed already and I wonder if there exists a good solution now?

解决方案

The best way I could fine is this:

    select::-ms-expand
    {
        display: none;
    }
    select
    {
        -webkit-appearance: none;
        -moz-appearance: none;      
        appearance: none;
        padding: 2px 30px 2px 2px;
        /*border: none; - if you want the border removed*/
    }

This works in Chrome and IE.

Unfortunately in your case -moz-appearance:none does not seem to currently be fully supported.

There is a bug here: https://bugzilla.mozilla.org/show_bug.cgi?id=649849 which which has a RESOLVED FIXED status but seems to be dependant on another bug here: https://bugzilla.mozilla.org/show_bug.cgi?id=1076846 which has a NEW status so hopefully it will be fixed soon.

这篇关于HTML隐藏用css选择下拉箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！