CSS之修改select右边的三角下拉框

 

效果图与EasyUI的comobox样式基本一致

select {
  /*定义外观*/
  font-size: 12px;
  border: 1px solid #c3c2be;
  padding: 4px;
  white-space: normal; 
  vertical-align: top; 
  outline-style: none;
  padding-top: 0px; 
  border-radius: 5px 5px 5px 5px; 
  resize: none;margin: 0px 18px 0px 0px;
  padding-bottom: 0px;
  height: 22px;
  line-height: 22px;
  width: 150px;
    
  
 
  /*将默认的select选择框样式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
 
  /*在选择框的最右侧中间显示小箭头图片*/
  background: url('<%=contextPath%>/admin/images/combo_arrow.png') no-repeat scroll right center transparent;  
 
background-color: white;
  /*为下拉小箭头留出一点位置，避免被文字覆盖*/
  padding-right: 14px;
  
}
 
 
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }