CODEWITHSUNDEEP
htmlcssfirefoxdrop-down-menu
David
David

Reputation: 432

Border to select element in firefox

I would like to add border to select element.

The problem is in firefox (version 29.0.1) that add a background to the arrow, that I don't want and I wish the arrow background stay white.

You can see the code below (the select with the id select 2 is the one with the border):

#select2 {border:1px solid #999;}
<select id='select1'>
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
</select>
<br/><br/>
<select id='select2'>
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
</select>

There is also fiddle here

and an image:
enter image description here

I want the firefox select element will look like the chrome (gray border on the select and white background on the arrow).

Thanks!

Upvotes: 0

Views: 928

Answers (1)

K K
K K

Reputation: 18109

You can use this css and custom image for dropdown:

#select2 {
    border:1px solid #999;
    outline : none;
    overflow : hidden;
    text-indent : 0.01px;
    text-overflow :'';
    background : url("https://cdn2.iconfinder.com/data/icons/picol-vector/32/arrow_sans_down-16.png") no-repeat right 2px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    width:80px;//You can use custom dimension
}
select.#select2 :: -ms-expand {
    display: none;
}

Demo: http://jsfiddle.net/lotusgodkk/RmfQ3/2/

Upvotes: 1

Related Questions