0

I have created a custom drop down menu with image as an arrow instead of default arrow. It is working fine in chrome but i am unable to hide the default drop down arrow in firefox and IE8 and above browsers.

Here is my code.

<body bgcolor="#f2f2f2">
<div id="list_textA">I want to select a</div>
        <select name="mydropdown" class="dropdown">
            <option value="listItemA">Predefined</option>
            <option value="listItemB">Custom</option>
        </select>
<div  id="list_textB">profile</div>   
<style>
.dropdown {
border: none;
background-image: url(image.png);
background-repeat: no-repeat;
background-position: right 10px center, left 10px center;
padding-right:75px;
appearance:none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
background-color:#f2f2f2;
color:#067ab4;
display:inline-block;
 } 
.dropdown{line-height:40px;color:#067ab4;font:36px omnes_attregular;display:inline-block;margin-top:45px;}
div#list_textA{line-height:40px;display:inline-block;font:36px omnes_attregular;padding-left:10px;margin-top:0px;color:#444444;}
div#list_textB{line-height:40px;display:inline-block;font:36px omnes_attregular;margin-top:45px;color:#444444;}
 </style>
 </body>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
user3885720
  • 79
  • 1
  • 7

1 Answers1

0

Unfortunately select elements are not able to be styled consistently across browsers. The only way that I know how to have complete control over the style is to hide the select and emulate it with divs and javascript.

Lucky for all of us, this process has been made into a jQuery plugin: http://harvesthq.github.io/chosen/

Chosen is my favorite, but I'm sure there are others out there.

The Maniac
  • 2,628
  • 3
  • 19
  • 29