在ie8和ie9下拉不起作用 [英] drop down not working in ie8 and ie9

问题描述

html：

 < div class =select-input> 
< select> 
< option value =1>选项1< / option> 
< option value =2>选项2< / option> 
< / select> 
< / div> 
  

css：

  .select-input {
 width：180px; 
 padding：5px; 
 font-family：Helvetica-Light; 
 font-size：9pt; 
颜色：＃2a2a2a; 
 -webkit-appearance：none; 
 -moz-appearance：none; 
外观：无; 
 -o-appearance：none; 
 background：#ffffff url（... / images / select-arrow.png）no-repeat; 
 background-position：143px center; 
 overflow：hidden; 
 
} 
 .select-input {
 border-style：solid; 
 border-width：thin; 
 border-color：#DDDDDD; 
 margin-top：5px; 
 
  

请参阅我的演示

$ b $为了在IE中设计风格，你可能需要得到实际的< select> 要比你的< div> 宽。你在找什么可能是这样的： http://jsfiddle.net/qhCsJ/2187/

html:

<div class="select-input">
     <select>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>           
     </select>  
 </div>

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;

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

see my demo in fiddle

I customized the arrow of drop down box and it is working good in Chrome,FF,Opera like in screenshot but not working in ie9 and ie8.In ie9 and ie8 i am getting the output like in fiddle so how to customize that look like in FF & Chrome.

Last Update:working demo

解决方案

Well, in order to style those in IE, you might need to get the actual <select> to be wider than the <div> you have. What you are looking for is probably something like this: http://jsfiddle.net/qhCsJ/2187/

这篇关于在ie8和ie9下拉不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！