无法隐藏firefox 31版本中的下拉选择(默认)箭头

时间:2014-08-11 09:40:05

标签: jquery html html5 css3 firefox

大家好我在firefox中选择默认下拉箭头有点问题,我想隐藏默认的一个,需要显示自定义的一个......我已经尝试了stackoverflow论坛中给出的所有方法但似乎没有人工作......

下图是我的问题 enter image description here

以及下面给出的css样式代码

     select, .select2-container .select2-choice {
position: relative;
/*height: 40px;*/
padding: 0.625rem 2.5rem 0.625rem 0.625rem;
border: none;
font-family: 'opensans', helvetica, arial, sans-serif;
font-size: 0.875rem;
font-weight: bold;
color: #ff8300;
outline: none;
background: url("../../Images/MasterPage/images/select_arrow@2x.png") white no-repeat right center;
background-size: 38px 38px;
-moz-appearance: none;
-webkit-appearance: none;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(0, 0, 0, 0.1);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
z-index: 0;
cursor: pointer;
}

下面给出了解决firefox的问题

    @-moz-document url-prefix() {
    select {
        -moz-appearence: none;
        text-indent: 0.01px;
        text-overflow: '';
        padding-right: 0px;
    }

    /*select {
    display: inline-flexbox;
    border: 0;
    box-shadow: inset 0 0 1px #000;
    padding: 0;
    background-position: right center;
    padding-right: 16px;
    color: transparent;
    text-shadow: 0 4px 0 #000;
    text-indent: 2px;
  }
  select * {
    color: black;
    text-shadow: none;
  }*/

    /*selectbox {
        width: 154px;
    }
    .selectbox .select {
        width: 170px;
    }*/
}

我试过把div,span之前选择那些也不适合我....下面是下拉列表控件.....

   <td align="left" style="width: 210px;">View

        <asp:DropDownList ID="ddlCertType" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlCertType_SelectedIndexChanged">
            <asp:ListItem Value="ALL_CERTS">All Certifcates</asp:ListItem>
            <asp:ListItem Value="EVAL_CERTS">Eval Certificates</asp:ListItem>
            <asp:ListItem Selected="True" Value="PERM_CERTS">Permanent Certificates</asp:ListItem>
        </asp:DropDownList>

    </td>
    <td align="left" style="width: 8%">         
        <asp:DropDownList ID="ddlCertVersion" runat="server" AutoPostBack="True" CssClass="ddlist" OnSelectedIndexChanged="ddlCertVersion_SelectedIndexChanged" Width="90px">
            <asp:ListItem Value="PRE">Pre 5.0</asp:ListItem>
            <asp:ListItem Selected="True" Value="POST">Post 5.0</asp:ListItem>
        </asp:DropDownList>
    </td> 

任何人都知道为什么我仍然会得到默认箭头

0 个答案:

没有答案