0

html:

<span align="left" class="section_span" >
<label for="gender">Gender</label><br />
<select id="gender" name="gender" class="select-input">
<option value="">Gender</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select><br /><br />
</span>

css:

.select-input{
    width:180px;  
    padding:5px;
    font-family: "Helvetica-Light";
    font-size: 9pt;
    color:#2a2a2a;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -o-appearance: none;
    background: #ffffff url("../images/select-arrow.png") no-repeat;
    background-position:143px center;
    overflow:hidden;
}

  border-style:solid;
    border-width:thin; 
    border-color: #DDDDDD;
    margin-top:5px;
}

.section_span{
    width:190px;
    float:left;
    margin-top: 5px;
    margin-right:11px;
}

I am getting the drop down arrow like in the screen shot in chrome and FF(showing both side arrow).But in ie8 and ie9 it is showing only downward arrow and not showing both up and down arrow as shown in chrome and FF.How to solve thisenter image description here.

user2725407
  • 400
  • 1
  • 4
  • 16
  • possible duplicate of [CSS for the "down arrow" on a – isherwood Oct 10 '13 at 16:58
  • More possible solutions here: http://stackoverflow.com/questions/16603979/select-removing-dropdown-arrow – isherwood Oct 10 '13 at 17:01

1 Answers1

0

What about having your customized dropdown box??

FIDDLE

vishalkin
  • 1,175
  • 2
  • 12
  • 24