Question

我希望更改选择框右下角的按钮（向下箭头）。我的HTML是这样的：

<div class="buscaSelect">
    <select name="oper">
        <option value="value1">Value 1</option>
        <option value="value2">Value 2</option>
    </select>
</div>

比CSS：

.buscaSelect {
    display: inline-block;
    margin: 18px 0px 0px 0px;
    width: 120px;
    height: 27px;
    border-radius: 0px;
    overflow: hidden;
    background: white url("btnSelect.png") no-repeat right center;
}

.buscaSelect select {
    padding: 4px;
    width: 100%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
}

在Safari中，结果很完美，默认按钮由“btnSelect.png”更改，但在Firefox（58.0b9）中，默认按钮仍然存在，与我的按钮重叠。由于默认按钮的宽度较小，我按钮的一角出现在后面......结果很糟糕！

如何停用Firefox默认按钮并仅显示我的？

Answer 1

我认为你正在寻找这个，希望它有所帮助。我已经将下拉和下拉箭头并排比较.webkit-appearance：none与firefox和chrome兼容，但对于IE，你可能需要使用它：

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

＆＃13;

.buscaSelect {
    display: inline-block;
    margin: 18px 0px 0px 0px;
    width: 120px;
    height: 27px;
    border-radius: 0px;
    overflow: hidden;
    background: white url("btnSelect.png") no-repeat right center;
}

.buscaSelect select {
    padding: 4px;
    width: 100%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
}

#noarrow {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}
select::-ms-expand {
    display: none;
}

＆＃13;

<div class="buscaSelect">
    <select name="oper" id="noarrow">
        <option value="value1">Value 1</option>
        <option value="value2">Value 2</option>
    </select>
</div>
<div class="buscaSelect">
    <select name="oper">
        <option value="value1">Value 1</option>
        <option value="value2">Value 2</option>
    </select>
</div>

＆＃13;

自定义选择css无法在Firefox中使用

1 个答案: