CODEWITHSUNDEEP
htmlcssfirefox
Gustavo
Gustavo

Reputation: 1683

Custom select with css not working in Firefox

I wish to change the button (arrow down) in the right corner of the select box. My html is like this:

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

Than the 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;
}

In Safari, the result is perfect, the default button is changed by "btnSelect.png", but in Firefox (58.0b9), the default button is still there, overlapping my button. As the default button got smaller width, the corner of my button is appearing behind... the result is terrible!

How can I deactivate the Firefox default button and show only mine?

Upvotes: 1

Views: 1701

Answers (1)

user7207170
user7207170

Reputation:

I think you're looking for this, hope it helps. I have given the comparison of both with dropdown and without dropdown arrow side by side.The webkit-appearance:none works well with firefox and chrome but for IE you might need to use this:

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


.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;
}
<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>

Upvotes: 1

Related Questions